How to Install Pingstreams on WordPress

Find out how to install Pingstreams on your WordPress website. You can install it simply by adding the JavaScript code to your web page. Follow the step-by-step instructions below to integrate powerful AI-powered customer support into your WordPress site.

Why Install Pingstreams on WordPress?

Integrating Pingstreams with your WordPress site provides numerous advantages:

• 24/7 Customer Support - Automated AI responses to visitor inquiries
• Lead Generation - Capture and qualify leads through intelligent conversations
• Content Assistance - Help visitors find relevant content and pages
• E-commerce Support - Assist with product inquiries and purchases (WooCommerce compatible)
• Multi-language Capability - Serve international audiences effectively
• User Engagement - Increase time on site and reduce bounce rates

Prerequisites

Before starting the installation:

• WordPress admin access with theme editing permissions
• Active Pingstreams account
• Basic familiarity with WordPress administration
• Theme backup (recommended for safety)

Installation Methods

Choose from three installation methods based on your comfort level and requirements:

Method 1: Theme File Editing (Recommended)

Direct code insertion into theme files for maximum control.

Method 2: Plugin Installation

Using a dedicated plugin for easier management.

Method 3: Header/Footer Scripts

Using WordPress customizer or plugins like “Insert Headers and Footers.”

Method 1: Theme File Editing

Step 1: Get Your Pingstreams Widget Code

You can add a Pingstreams widget to your WordPress site by adding the chat manually. To do this:

1. Open the Pingstreams console
2. Select the project to integrate
3. Go to Settings > Installation
4. Select integration with JavaScript code
5. Press Copy Script to copy the entire code

See the screenshot below:

Step 2: Access WordPress Theme Editor

1. Log in to the WordPress admin panel
2. In the WordPress Dashboard, select Tools > Theme File Editor
3. Select your active theme from the dropdown
4. Locate and select the footer.php file

Step 3: Add the Widget Code

1. Locate the closing </body> tag in footer.php
2. Paste the JavaScript code just before the closing </body> tag
3. Ensure proper indentation and formatting

Example Code Placement:

    <!-- Pingstreams Chat Widget
    <script type="application/javascript">
    window.pingstreamsSettings = {
      projectid: "your-project-id-here",
      // WordPress specific settings
      platform: "wordpress",
      siteUrl: "<?php echo home_url(); ?>",
      currentPage: "<?php echo get_the_title(); ?>"
    };
    
    (function(d, s, id) {
      var w = window;
      var d = document;
      var i = function() { i.c(arguments); };
      i.q = [];
      i.c = function(args) { i.q.push(args); };
      w.Pingstreams = i;
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s);
      js.id = id;
      js.async = true;
      js.src = "https://widget.pingstreams.com/v6/launch.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'pingstreams-jssdk'));
    </script>
    <!-- End Pingstreams Chat Widget
    
  </body>
</html>

Step 4: Save Changes

Remember to press the Update File button at the bottom left of the page to save your changes.

Important: Always backup your theme files before making changes. Theme updates will overwrite your modifications.

Method 2: Plugin Installation

Option A: Functions.php Method

Add the widget code through your theme’s functions.php file:

function add_pingstreams_widget() {
    if (!is_admin()) {
        ?>
        <script type="application/javascript">
        window.pingstreamsSettings = {
          projectid: "your-project-id-here"
        };
        (function(d, s, id) {
          var w = window; var d = document;
          var i = function() { i.c(arguments); };
          i.q = []; i.c = function(args) { i.q.push(args); };
          w.Pingstreams = i;
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id; js.async = true;
          js.src = "https://widget.pingstreams.com/v6/launch.js";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'pingstreams-jssdk'));
        </script>
        <?php
    }
}
add_action('wp_footer', 'add_pingstreams_widget');

Option B: Custom Plugin Creation

Create a simple plugin for easier management:

<?php
/*
Plugin Name: Pingstreams Chat Widget
Description: Adds Pingstreams chat widget to your WordPress site
Version: 1.0.0
*/

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

class PingstreamsWidget {
    
    public function __construct() {
        add_action('wp_footer', array($this, 'add_widget_script'));
        add_action('admin_menu', array($this, 'add_admin_menu'));
    }
    
    public function add_widget_script() {
        $project_id = get_option('pingstreams_project_id');
        if ($project_id) {
            ?>
            <script type="application/javascript">
            window.pingstreamsSettings = {
              projectid: "<?php echo esc_js($project_id); ?>"
            };
            // Widget loading script here
            </script>
            <?php
        }
    }
    
    public function add_admin_menu() {
        add_options_page(
            'Pingstreams Settings',
            'Pingstreams',
            'manage_options',
            'pingstreams-settings',
            array($this, 'settings_page')
        );
    }
    
    public function settings_page() {
        if (isset($_POST['submit'])) {
            update_option('pingstreams_project_id', sanitize_text_field($_POST['project_id']));
            echo '<div class="notice notice-success"><p>Settings saved!</p></div>';
        }
        
        $project_id = get_option('pingstreams_project_id', '');
        ?>
        <div class="wrap">
            <h1>Pingstreams Settings</h1>
            <form method="post">
                <table class="form-table">
                    <tr>
                        <th scope="row">Project ID</th>
                        <td>
                            <input type="text" name="project_id" value="<?php echo esc_attr($project_id); ?>" class="regular-text" />
                            <p class="description">Enter your Pingstreams Project ID</p>
                        </td>
                    </tr>
                </table>
                <?php submit_button(); ?>
            </form>
        </div>
        <?php
    }
}

new PingstreamsWidget();
?>

Method 3: Using Customizer or Plugins

WordPress Customizer Method

1. Go to Appearance > Customize
2. Navigate to Additional CSS or Custom HTML
3. Add the widget code in the appropriate section

Insert Headers and Footers Plugin

1. Install the “Insert Headers and Footers” plugin
2. Go to Settings > Insert Headers and Footers
3. Paste the Pingstreams code in the “Scripts in Footer” section

Step 5: Verify Installation

Go to your WordPress website and check if you can see the Pingstreams widget.

Verification Checklist:

• ✅ Widget appears on all pages
• ✅ Chat window opens when clicked
• ✅ Mobile responsive design works
• ✅ No JavaScript errors in browser console
• ✅ Page loading remains fast

WordPress-Specific Integrations

WooCommerce Integration

For WooCommerce stores, enhance the widget with product data:

// On product pages
<?php if (is_product()): ?>
window.pingstreamsSettings.productData = {
  id: <?php echo get_the_ID(); ?>,
  name: "<?php echo esc_js(get_the_title()); ?>",
  price: "<?php echo esc_js(get_woocommerce_currency_symbol() . wc_get_product(get_the_ID())->get_price()); ?>",
  category: "<?php echo esc_js(wp_strip_all_tags(wc_get_product_category_list(get_the_ID()))); ?>",
  inStock: <?php echo wc_get_product(get_the_ID())->is_in_stock() ? 'true' : 'false'; ?>
};
<?php endif; ?>

User Data Integration

Pass logged-in user information:

<?php if (is_user_logged_in()): ?>
  <?php $current_user = wp_get_current_user(); ?>
  window.pingstreamsSettings.userData = {
    email: "<?php echo esc_js($current_user->user_email); ?>",
    name: "<?php echo esc_js($current_user->display_name); ?>",
    userId: <?php echo $current_user->ID; ?>
  };
<?php endif; ?>

Content Context Integration

Provide page context to the chat:

window.pingstreamsSettings.pageContext = {
  type: "<?php echo get_post_type(); ?>",
  title: "<?php echo esc_js(get_the_title()); ?>",
  category: "<?php echo esc_js(get_the_category_list(', ')); ?>",
  url: "<?php echo esc_js(get_permalink()); ?>"
};

Advanced WordPress Features

Conditional Loading

Load the widget only on specific pages:

function add_pingstreams_widget_conditional() {
    // Only load on specific page types
    if (is_home() || is_shop() || is_product() || is_page('contact')) {
        // Add widget code here
    }
}
add_action('wp_footer', 'add_pingstreams_widget_conditional');

Custom Post Type Integration

Support for custom post types:

// For custom post types like 'portfolio' or 'services'
if (is_singular('portfolio')) {
    $portfolio_data = array(
        'project_type' => get_field('project_type'),
        'client_name' => get_field('client_name'),
        'completion_date' => get_field('completion_date')
    );
    
    echo '<script>window.pingstreamsSettings.portfolioData = ' . json_encode($portfolio_data) . ';</script>';
}

Multisite Support

For WordPress multisite networks:

function add_pingstreams_multisite() {
    $site_id = get_current_blog_id();
    $project_mapping = array(
        1 => 'main-site-project-id',
        2 => 'blog-site-project-id',
        3 => 'shop-site-project-id'
    );
    
    $project_id = isset($project_mapping[$site_id]) ? $project_mapping[$site_id] : 'default-project-id';
    
    echo '<script>window.pingstreamsSettings = { projectid: "' . $project_id . '" };</script>';
}

Popular Plugin Compatibility

SEO Plugins

• Yoast SEO - No conflicts, widget loads after SEO scripts
• RankMath - Compatible with all features
• All in One SEO - Works seamlessly

Caching Plugins

• WP Rocket - Add pingstreams domain to external JS exclusions
• W3 Total Cache - Exclude widget from minification
• WP Super Cache - No special configuration needed

Security Plugins

• Wordfence - Whitelist Pingstreams widget domain
• Sucuri - Add widget script to allowed external resources

Performance Optimization

Lazy Loading Implementation

// Load widget after page interaction
function initPingstreamsLazy() {
    let widgetLoaded = false;
    
    function loadWidget() {
        if (!widgetLoaded) {
            // Insert Pingstreams widget code here
            widgetLoaded = true;
        }
    }
    
    // Load on scroll or after 5 seconds
    window.addEventListener('scroll', loadWidget, { once: true });
    setTimeout(loadWidget, 5000);
}

// Initialize lazy loading
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initPingstreamsLazy);
} else {
    initPingstreamsLazy();
}

Cache Optimization

For caching compatibility:

// Bypass cache for dynamic user data
function pingstreams_bypass_cache() {
    if (is_user_logged_in()) {
        // Prevent caching of pages with user-specific data
        header("Cache-Control: no-cache, must-revalidate");
    }
}
add_action('init', 'pingstreams_bypass_cache');

Troubleshooting Common Issues

Theme Updates Overwriting Changes

Solution: Use child themes or the functions.php method

// Create child theme and add to functions.php
function pingstreams_widget_child_theme() {
    // Widget code here - survives parent theme updates
}
add_action('wp_footer', 'pingstreams_widget_child_theme');

Plugin Conflicts

Common conflicting plugins:

• Heavy JavaScript optimization plugins
• Some popup/modal plugins
• Certain security plugins blocking external scripts

Solutions:

1. Test with plugins disabled to identify conflicts
2. Add exceptions for Pingstreams in optimization plugins
3. Configure security plugins to allow widget domain

Mobile Display Issues

CSS fixes for mobile:

@media (max-width: 768px) {
    .pingstreams-widget {
        bottom: 10px !important;
        right: 10px !important;
    }
    
    .pingstreams-chat-window {
        width: 100% !important;
        height: 70vh !important;
        max-width: 350px !important;
    }
}

Now Pingstreams is officially part of your website! 🎉

Congratulations! You have successfully integrated Pingstreams with your WordPress site. Your visitors now have access to:

• Intelligent AI-powered assistance for their questions
• Real-time support availability 24/7
• Personalized interactions based on page content
• Seamless mobile experience across all devices
• Multi-language support for international visitors

Next Steps

Optimize Your WordPress Integration

1. Configure AI responses for common WordPress/WooCommerce queries
2. Set up automated workflows for lead generation
3. Customize widget appearance to match your theme
4. Create content-specific responses for different page types
5. Implement user authentication for personalized experiences

Advanced Features to Explore

• Contact form integration with popular form plugins
• Membership site support for logged-in users
• Event calendar integration for bookings
• Multi-language site support with WPML
• Advanced analytics tracking and reporting

Video Tutorial

If you have had a chance to check this tutorial on YouTube, don’t forget to subscribe to join our amazing community! We greatly appreciate your support and love sharing WordPress integration tips.

Community and Resources

• 📚 WordPress-specific documentation and guides
• 🎥 Video tutorial library for visual learners
• 💬 Community forum for WordPress users
• 🔧 Developer resources for custom implementations
• 🎨 Theme compatibility guides and fixes

Ready to transform your WordPress site’s user experience? Start configuring your Pingstreams AI assistant today and watch engagement soar!

For technical support, custom WordPress integrations, or questions about advanced features, our team is here to help you make the most of your Pingstreams + WordPress combination.