How to Install Pingstreams on PrestaShop

Find out how to install Pingstreams on your PrestaShop website. You can install it simply by adding the JavaScript code to your web page. Follow the instructions below, or watch our video tutorial for a visual walkthrough.

Why Install Pingstreams on PrestaShop?

Integrating Pingstreams with your PrestaShop store provides powerful benefits:

• Automated Customer Support - AI-powered responses to common inquiries
• Increased Conversions - Proactive engagement to reduce cart abandonment
• Order Management - Automated order status updates and tracking
• Product Assistance - Help customers find the right products
• Multi-language Support - Serve international customers effectively
• 24/7 Availability - Never miss a potential sale or support request

Prerequisites

Before starting the installation:

• PrestaShop admin access with module installation permissions
• Active Pingstreams account
• HTMLbox module (we’ll guide you through installation)
• Basic understanding of PrestaShop administration

Step 1: Get Your Pingstreams Widget Code

You can add a Pingstreams widget to your PrestaShop 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: Disable HTML Purifier (Important!)

Before integrating the widget, you need to disable HTML purifier in your PrestaShop admin area to allow custom JavaScript.

1. Go to Shop Parameters > General
2. Find Use HTMLPurifier Library
3. Set it to No
4. Save the configuration

Why Disable HTML Purifier?

HTML Purifier filters out potentially harmful HTML and JavaScript. While this is good for security, it prevents custom widgets like Pingstreams from loading properly. By disabling it temporarily, we allow the widget code to function correctly.

Security Note: Re-enable HTML Purifier after installation if you frequently allow user-generated content on your site.

Step 3: Download and Install HTMLbox Module

Download the HTMLbox module from MyPresta.eu.

Installing the HTMLbox Module:

1. In the PrestaShop panel, select Module Manager
2. Click Upload a module
3. Upload the HTMLbox module file you downloaded

Alternative Installation Methods:

Via FTP:

1. Extract the module to your computer
2. Upload the folder to /modules/ directory on your server
3. Install through PrestaShop admin panel

Via GitHub (if available):

1. Clone the repository to your modules folder
2. Follow installation instructions from the repository

Step 4: Configure HTMLbox Module

Once the module is loaded, go to the Configure section.

Step 5: Add Pingstreams Widget Code

1. Select Tools > Source Code in the HTMLbox editor
2. Paste the JavaScript code of the Pingstreams widget
3. Make sure the code is properly formatted

Example Widget Code for PrestaShop:

<!-- Pingstreams Chat Widget for PrestaShop
<script type="application/javascript">
window.pingstreamsSettings = {
  projectid: "your-project-id-here",
  // PrestaShop specific settings
  ecommerce: true,
  platform: "prestashop",
  currency: "{$currency.iso_code}",
  language: "{$language.iso_code}"
};

(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>

HTMLbox Configuration Options:

Module Positioning:

• Hook Selection: Choose where to display the widget
• Page Restrictions: Control on which pages the widget appears
• Device Targeting: Show/hide on mobile or desktop
• Customer Group: Restrict visibility to specific customer groups

Advanced Settings:

• CSS Customization: Add custom styles for the widget
• JavaScript Hooks: Add custom event handlers
• Content Filtering: Control widget display based on content
• A/B Testing: Set up multiple widget versions

Step 6: Save Configuration

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

Configuration Best Practices:

• Test on staging before deploying to production
• Backup your database before making changes
• Document your settings for future reference
• Set appropriate cache refresh intervals

Step 7: Verify Installation

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

Verification Checklist:

• ✅ Widget appears on homepage and product pages
• ✅ Chat functionality works properly
• ✅ Mobile responsive design displays correctly
• ✅ No JavaScript errors in browser console
• ✅ Page loading speed remains acceptable

Advanced PrestaShop Integration

Customer Data Integration

Pass PrestaShop customer data to Pingstreams:

window.pingstreamsSettings = {
  projectid: "your-project-id-here",
  customerData: {
    email: "{if $customer.email}{$customer.email}{/if}",
    firstName: "{if $customer.firstname}{$customer.firstname}{/if}",
    lastName: "{if $customer.lastname}{$customer.lastname}{/if}",
    customerId: "{if $customer.id}{$customer.id}{/if}"
  }
};

Product Context Integration

Show product information in chat context:

// On product pages
{if $page.page_name == 'product'}
window.pingstreamsSettings.productData = {
  id: "{$product.id}",
  name: "{$product.name}",
  price: "{$product.price}",
  category: "{$product.category}",
  reference: "{$product.reference}",
  availability: "{if $product.available_for_order}available{else}unavailable{/if}"
};
{/if}

Order Integration

Track order information for customer support:

// On order confirmation page
{if $page.page_name == 'order-confirmation'}
window.pingstreamsSettings.orderData = {
  orderId: "{$order.id}",
  total: "{$order.total_paid}",
  status: "{$order.current_state}",
  reference: "{$order.reference}"
};
{/if}

PrestaShop-Specific Use Cases

Automated Customer Support

Configure Pingstreams for common PrestaShop scenarios:

Order Status Inquiries:

• Automatic order lookup by order number
• Real-time status updates
• Shipping tracking integration
• Delivery notifications

Product Information:

• Stock availability checks
• Product specifications and features
• Compatibility questions
• Size and fit guidance

Account Management:

• Password reset assistance
• Account information updates
• Loyalty points inquiries
• Wishlist management

Multi-Store Configuration

For PrestaShop multi-store setups:

// Configure different widgets per store
{assign var="current_store_id" value=$smarty.const.Context::getContext()->shop->id}

{if $current_store_id == 1}
  // Store 1 configuration
  window.pingstreamsSettings = {
    projectid: "store1-project-id"
  };
{elseif $current_store_id == 2}
  // Store 2 configuration  
  window.pingstreamsSettings = {
    projectid: "store2-project-id"
  };
{/if}

Language-Specific Configuration

Support multiple languages:

window.pingstreamsSettings = {
  projectid: "your-project-id-here",
  language: "{$language.iso_code}",
  translations: {
    {if $language.iso_code == 'fr'}
      welcomeMessage: "Bonjour! Comment puis-je vous aider?",
      offlineMessage: "Nous sommes actuellement hors ligne."
    {elseif $language.iso_code == 'es'}
      welcomeMessage: "¡Hola! ¿Cómo puedo ayudarte?",
      offlineMessage: "Actualmente estamos fuera de línea."
    {else}
      welcomeMessage: "Hello! How can I help you?",
      offlineMessage: "We are currently offline."
    {/if}
  }
};

Troubleshooting Common Issues

Widget Not Displaying

Possible Causes:

• HTML Purifier still enabled
• HTMLbox module not properly configured
• JavaScript errors in console
• Cache not cleared

Solutions:

1. Verify HTML Purifier is disabled in Shop Parameters
2. Check HTMLbox module is active and configured
3. Clear PrestaShop cache (Performance > Clear Cache)
4. Check browser console for JavaScript errors

Widget Appearing Multiple Times

Possible Causes:

• HTMLbox module configured in multiple hooks
• Code added to multiple template files
• Cache conflicts

Solutions:

1. Review HTMLbox configuration and remove duplicate hooks
2. Search template files for duplicate Pingstreams code
3. Clear all caches and refresh

Performance Issues

Monitoring:

• Page load times before and after installation
• JavaScript execution performance
• Server response times
• Customer experience metrics

Optimization:

1. Optimize HTMLbox placement for minimal impact
2. Use async loading for the widget script
3. Monitor resource usage regularly
4. Consider CDN for faster script delivery

Mobile Display Problems

Common Issues:

• Widget overlapping with mobile navigation
• Touch interaction problems
• Responsive design conflicts

Solutions:

/* Mobile-specific widget adjustments */
@media (max-width: 768px) {
  .pingstreams-widget {
    bottom: 10px !important;
    right: 10px !important;
    z-index: 9999 !important;
  }
  
  .pingstreams-chat-window {
    max-height: 70vh !important;
    width: 90vw !important;
  }
}

Security Considerations

Re-enabling HTML Purifier

After successful installation, consider re-enabling HTML Purifier:

1. Test widget functionality thoroughly
2. Re-enable HTML Purifier in Shop Parameters
3. Verify widget still works after re-enabling
4. Monitor for any issues

Additional Security Measures

• Regular security updates for PrestaShop and modules
• Monitor for suspicious activity in chat logs
• Use HTTPS for all communications
• Implement proper access controls

Performance Optimization

Caching Strategy

Configure appropriate caching:

// In your theme's modules/htmlbox/config.xml
<cache_lifetime>86400</cache_lifetime> <!-- 24 hours

Lazy Loading Implementation

Implement lazy loading for better performance:

// Load widget only when needed
function loadPingstreamsWidget() {
  if (!window.Pingstreams) {
    // Insert widget code here
    console.log('Pingstreams widget loaded');
  }
}

// Load on user interaction
document.addEventListener('scroll', function() {
  if (window.pageYOffset > 100) {
    loadPingstreamsWidget();
  }
}, { once: true });

Analytics Integration

PrestaShop Analytics

Track widget performance with PrestaShop analytics:

// Custom event tracking
function trackChatEvent(eventType) {
  if (typeof ga !== 'undefined') {
    ga('send', 'event', 'Pingstreams', eventType, window.location.pathname);
  }
  
  // PrestaShop specific tracking
  if (typeof prestashop !== 'undefined') {
    prestashop.emit('chatEvent', {
      type: eventType,
      page: prestashop.page.page_name
    });
  }
}

// Track chat interactions
window.pingstreamsSettings.onChatStart = function() {
  trackChatEvent('Chat Started');
};

Conversion Tracking

Monitor the impact on sales:

// Track conversions on order confirmation
{if $page.page_name == 'order-confirmation'}
window.pingstreamsSettings.conversionData = {
  orderId: "{$order.id}",
  value: "{$order.total_paid}",
  currency: "{$currency.iso_code}"
};
{/if}

Module Management Best Practices

Version Control

• Track HTMLbox module versions
• Document configuration changes
• Backup module settings before updates
• Test updates on staging environment

Regular Maintenance

Monthly tasks:

• Update HTMLbox module if new versions available
• Review widget performance metrics
• Check for security updates
• Optimize configuration based on usage data

Quarterly tasks:

• Full functionality testing
• Performance benchmark comparisons
• Security audit of custom code
• User experience review

Integration with PrestaShop Modules

Popular Module Compatibility

Pingstreams works well with:

• Abandoned Cart Pro - Cart recovery integration
• Customer Reviews - Review management
• Live Translation - Multi-language support
• Advanced Search - Product finding assistance
• Loyalty Points - Points balance inquiries

Custom Module Integration

Create custom hooks for deeper integration:

// In your custom module
public function hookDisplayFooter($params) {
    if ($this->isPingstreamsEnabled()) {
        return $this->display(__FILE__, 'pingstreams-widget.tpl');
    }
}

private function isPingstreamsEnabled() {
    return Configuration::get('PINGSTREAMS_ENABLED') && 
           Configuration::get('PINGSTREAMS_PROJECT_ID');
}

Now Pingstreams is officially part of your website! 🎉

Congratulations! You have successfully integrated Pingstreams with your PrestaShop store. Your customers now benefit from:

• Instant AI-powered support for their questions
• Personalized shopping assistance
• Real-time order tracking and updates
• 24/7 availability for customer inquiries
• Multi-language support for international customers

Next Steps

Optimize Your Setup

1. Configure AI responses for common PrestaShop queries
2. Set up automated workflows for order management
3. Customize widget appearance to match your brand
4. Train the AI with your product catalog information
5. Create lead capture forms for newsletter signups

Advanced Features

Explore premium Pingstreams capabilities:

• Advanced analytics and customer insights
• Custom integrations with PrestaShop APIs
• Team collaboration tools for customer support
• Automated marketing campaign triggers
• Advanced chatbot conversation flows

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 PrestaShop integration tips and best practices.

Community Resources

• 📚 Documentation: Comprehensive guides and API references
• 🎥 Video Library: Step-by-step tutorial collection
• 💬 Community Forum: Connect with other PrestaShop + Pingstreams users
• 🛠️ Developer Resources: Advanced integration techniques

Ready to maximize your PrestaShop store’s potential? Start configuring your Pingstreams AI assistant today and transform your customer experience!

For technical support, custom integration needs, or questions about advanced features, our expert team is ready to help you succeed with your PrestaShop + Pingstreams integration.