How to Install Pingstreams on Shopify

Find out how to install Pingstreams on your Shopify 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 e-commerce store.

Why Install Pingstreams on Shopify?

Integrating Pingstreams with your Shopify store provides numerous benefits:

• 24/7 Customer Support - Automated responses to customer inquiries
• Increased Sales - Proactive chat to help customers make purchasing decisions
• Reduced Cart Abandonment - Engage visitors before they leave
• Order Tracking - Automated order status updates and shipping information
• Product Recommendations - AI-powered suggestions based on customer preferences
• Multi-language Support - Serve international customers in their native language

Prerequisites

Before starting the installation:

• Active Shopify store with admin access
• Pingstreams account (create one if you don’t have it)
• Basic understanding of Shopify theme editing

Step 1: Get Your Pingstreams Widget Code

You can add a Pingstreams widget to your Shopify 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:

Understanding the Widget Code

The Pingstreams widget code includes:

• Project ID: Your unique identifier
• Widget Configuration: Appearance and behavior settings
• Loading Script: Optimized for fast page load times
• Security Features: Built-in protection against XSS attacks

Step 2: Access Shopify Theme Editor

1. Log in to the Shopify admin panel
2. Navigate to Online Store > Themes
3. Find your current theme and click the Actions menu
4. Select Edit code from the dropdown list

Shopify Theme Structure

Understanding the key theme files:

• theme.liquid: Main template file (recommended for widget installation)
• layout files: Control overall page structure
• template files: Control specific page types
• snippet files: Reusable code components

Step 3: Install the Widget Code

1. Select the theme.liquid file in the Layout folder
2. Paste the JavaScript code just before the closing </body> tag
3. Make sure the code is properly indented and formatted

Code Placement Best Practices

• Before </body> tag: Ensures proper loading without blocking page render
• After main content: Doesn’t interfere with critical page elements
• Consistent indentation: Maintains code readability
• Comment your additions: Mark custom code for future reference

Example Installation Code

<!-- Pingstreams Chat Widget
<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>
<!-- End Pingstreams Chat Widget

Step 4: Save Your Changes

Remember to press the Save button at the top right of the page to save your changes.

Important Notes:

• Always backup your theme before making changes
• Test on staging if you have a development store
• Check mobile responsiveness after installation
• Verify widget functionality on different browsers

Step 5: Verify Installation

Go to your Shopify 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 properly
• ✅ Loading speed is not impacted
• ✅ No JavaScript errors in browser console

Advanced Configuration Options

Custom Widget Positioning

You can customize the widget position by adding CSS:

/* Custom Pingstreams Widget Positioning */
.pingstreams-widget {
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
}

Conditional Loading

Load the widget only on specific pages:

// Only load on product and cart pages
if (window.location.pathname.includes('/products/') || 
    window.location.pathname.includes('/cart')) {
  // Insert Pingstreams widget code here
}

E-commerce Specific Features

Configure Pingstreams for Shopify-specific functionality:

Order Tracking Integration:

window.pingstreamsSettings = {
  projectid: "your-project-id-here",
  shopifyStore: "your-store-name.myshopify.com",
  orderTracking: true,
  customerData: {
    email: "{{ customer.email }}",
    name: "{{ customer.first_name }} {{ customer.last_name }}"
  }
};

Product Recommendations:

// Pass current product data to Pingstreams
window.pingstreamsSettings = {
  projectid: "your-project-id-here",
  currentProduct: {
    id: "{{ product.id }}",
    title: "{{ product.title }}",
    price: "{{ product.price }}",
    category: "{{ product.type }}"
  }
};

Shopify-Specific Use Cases

Customer Support Automation

Set up automated responses for common Shopify queries:

• Order status inquiries
• Shipping and returns policy
• Product availability questions
• Size and fitting guides
• Payment and checkout issues

Sales Enhancement

Use Pingstreams to boost sales:

• Abandoned cart recovery notifications
• Upselling and cross-selling suggestions
• Discount code distribution
• Product recommendation engine
• Inventory alerts for low stock items

Multi-Store Management

For Shopify Plus merchants with multiple stores:

• Separate widgets per store/market
• Centralized chat management
• Language-specific configurations
• Regional customer support routing

Troubleshooting Common Issues

Widget Not Appearing

Possible causes:

• JavaScript errors blocking execution
• Theme cache not cleared
• Code placed in wrong location
• Project ID incorrect

Solutions:

1. Check browser console for JavaScript errors
2. Clear browser cache and refresh page
3. Verify code placement before </body> tag
4. Double-check Project ID in Pingstreams dashboard

Widget Appearing Multiple Times

Possible causes:

• Code added to multiple template files
• Theme updates duplicated code
• Custom snippets conflicting

Solutions:

1. Search all theme files for Pingstreams code
2. Remove duplicate instances
3. Consolidate to theme.liquid only

Mobile Display Issues

Possible causes:

• CSS conflicts with theme styles
• Viewport settings interfering
• Touch interaction problems

Solutions:

1. Add mobile-specific CSS overrides
2. Test on multiple devices and screen sizes
3. Adjust z-index values for proper layering

Performance Impact

Monitoring:

• Page load speed before and after installation
• JavaScript execution time
• Network requests impact
• Core Web Vitals metrics

Optimization:

• Lazy load the widget after page load
• Minimize widget features not being used
• Use CDN delivery for faster script loading

Integration with Shopify Apps

Popular App Integrations

Pingstreams works well with:

• Klaviyo - Email marketing automation
• ReCharge - Subscription management
• Yotpo - Reviews and loyalty programs
• Gorgias - Customer service platform
• Zendesk - Help desk integration

Webhook Configuration

Set up webhooks to sync data:

// Shopify order webhook example
{
  "webhook_url": "https://api.pingstreams.com/webhooks/shopify",
  "events": ["order_created", "order_updated", "order_cancelled"],
  "shop": "your-store.myshopify.com"
}

Analytics and Reporting

Key Metrics to Track

Monitor the impact of Pingstreams on your store:

• Conversion rate improvements
• Average order value changes
• Customer satisfaction scores
• Support ticket reduction
• Response time metrics

Google Analytics Integration

Track chat interactions:

// Google Analytics 4 event tracking
gtag('event', 'chat_started', {
  'event_category': 'engagement',
  'event_label': 'pingstreams_widget'
});

Compliance and Security

GDPR Compliance

Ensure your chat widget complies with privacy regulations:

• Cookie consent integration
• Data processing transparency
• Right to erasure implementation
• Privacy policy updates

Security Best Practices

• Regular updates of widget code
• HTTPS enforcement for all communications
• Input validation for custom configurations
• Access control for admin features

Well now Pingstreams is integrated on your website! 🎉

Congratulations! You have successfully integrated Pingstreams with your Shopify store. Your customers can now:

• Get instant support through AI-powered chat
• Receive personalized product recommendations
• Track their orders seamlessly
• Get help in multiple languages
• Experience 24/7 customer service

Next Steps

Optimize Your Setup

1. Configure chatbot responses for common Shopify queries
2. Set up automated workflows for order management
3. Train your AI with product-specific information
4. Create custom forms for lead capture
5. Integrate with your CRM for comprehensive customer data

Advanced Features

Explore premium Pingstreams features:

• Advanced analytics and reporting
• Custom branding options
• API integrations with Shopify data
• Multi-channel support (email, SMS, social)
• Team collaboration tools

Learn More

• 📚 Read our blog to discover advanced Shopify integration tips
• 🎥 Watch video tutorials for visual learning
• 💬 Join our community for support and best practices
• 🛠️ Explore API documentation for custom integrations

Ready to take your Shopify customer experience to the next level? Start configuring your Pingstreams chatbot today and watch your customer satisfaction and sales improve!

For additional support or custom configuration needs, our team is here to help you maximize the potential of your Pingstreams + Shopify integration.