How to Install Pingstreams on Joomla

Find out how to install Pingstreams on your Joomla website. You can install it simply by adding the JavaScript code to your web page. Follow these quick and easy instructions to integrate powerful AI-powered customer support into your Joomla site!

Why Install Pingstreams on Joomla?

Integrating Pingstreams with your Joomla website provides numerous advantages:

24/7 AI Customer Support - Automated responses to visitor inquiries
Lead Generation - Capture and qualify potential customers
Content Support - Help visitors navigate your Joomla site structure
Multi-language Capability - Perfect for Joomla’s multilingual features
Community Engagement - Enhanced interaction for Joomla community sites
Extension Compatibility - Works seamlessly with popular Joomla extensions

Prerequisites

Before starting the installation:

Joomla administrator access with template editing permissions
Active Pingstreams account with valid Project ID
Basic understanding of Joomla administration
Template backup (recommended for safety)
FTP access (optional, for advanced customization)

Installation Methods

Choose from multiple installation approaches:

Method 1: Template Editing (Recommended)

Direct integration into your Joomla template files for maximum control.

Method 2: Custom HTML Module

Using Joomla’s built-in Custom HTML module for easier management.

Method 3: Extensions Integration

Integration with third-party extensions for advanced features.

Method 1: Template File Editing

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

Open the Pingstreams console
Select the project to integrate
Go to Settings > Installation
Select integration with JavaScript code
Press Copy Script to copy the entire code

See the screenshot below:

Pingstreams Widget Code

Step 2: Access Joomla Template Manager

Log in to your Joomla administrator panel
Go to System > Templates > Site Templates section in your Joomla Control Panel

Joomla Template Manager

Step 3: Select Your Default Template

Click on your default theme template to access its files and configuration options.

Select Default Template

Step 4: Edit the Index.php File

Open the index.php file from the menu on the left side
Locate the closing </head> tag
Paste the JavaScript code just before the closing </head> tag

Edit Index.php File

Example Code Placement:

    <!-- Pingstreams Chat Widget for Joomla
    <script type="application/javascript">
    window.pingstreamsSettings = {
      projectid: "your-project-id-here",
      
      // Joomla-specific settings
      platform: "joomla",
      joomlaVersion: "<?php echo JVERSION; ?>",
      
      // Site information
      siteName: "<?php echo $this->params->get('sitename'); ?>",
      currentTemplate: "<?php echo $this->template; ?>",
      
      // Language settings
      language: "<?php echo JFactory::getLanguage()->getTag(); ?>",
      
      // User context (if logged in)
      <?php $user = JFactory::getUser(); ?>
      <?php if (!$user->guest): ?>
      userContext: {
        id: <?php echo $user->id; ?>,
        username: "<?php echo $user->username; ?>",
        name: "<?php echo $user->name; ?>",
        email: "<?php echo $user->email; ?>",
        usergroup: "<?php echo implode(', ', $user->getAuthorisedGroups()); ?>"
      },
      <?php endif; ?>
    };
    
    (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
    
  </head>

Step 5: Save Changes

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

Important: Template updates will overwrite your modifications. Consider using template overrides or child templates for persistent customization.

Method 2: Custom HTML Module

Alternative Installation via Module

For users who prefer not to edit template files directly:

Go to Content > Site Modules > New
Select “Custom HTML” module type
Configure the module settings:
- Title: Pingstreams Chat Widget
- Position: Choose a position (e.g., debug, footer, or custom)
- Status: Published
- Access: Public
- Language: All or specific language
In the Custom HTML editor, paste your widget code:

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

Save and close the module

Advanced Joomla Integration Features

Multi-language Site Support

For Joomla multilingual sites, enhance the widget with language-specific settings:

<script type="application/javascript">
// Multi-language support for Joomla
<?php 
$lang = JFactory::getLanguage();
$current_lang = $lang->getTag();
?>

// Language-specific configurations
var languageSettings = {
  'en-GB': {
    welcomeMessage: "Hello! How can we help you today?",
    offlineMessage: "We're currently offline. Please leave a message!",
    department: "english-support"
  },
  'es-ES': {
    welcomeMessage: "¡Hola! ¿Cómo podemos ayudarte hoy?",
    offlineMessage: "Actualmente estamos desconectados. ¡Por favor deja un mensaje!",
    department: "spanish-support"
  },
  'fr-FR': {
    welcomeMessage: "Bonjour! Comment pouvons-nous vous aider aujourd'hui?",
    offlineMessage: "Nous sommes actuellement hors ligne. Veuillez laisser un message!",
    department: "french-support"
  },
  'de-DE': {
    welcomeMessage: "Hallo! Wie können wir Ihnen heute helfen?",
    offlineMessage: "Wir sind derzeit offline. Bitte hinterlassen Sie eine Nachricht!",
    department: "german-support"
  }
};

var currentLanguage = "<?php echo $current_lang; ?>";
var currentSettings = languageSettings[currentLanguage] || languageSettings['en-GB'];

window.pingstreamsSettings = {
  projectid: "your-project-id-here",
  language: currentLanguage,
  welcomeMessage: currentSettings.welcomeMessage,
  offlineMessage: currentSettings.offlineMessage,
  department: currentSettings.department,
  
  // Joomla language context
  joomlaLanguage: {
    tag: "<?php echo $lang->getTag(); ?>",
    name: "<?php echo $lang->getName(); ?>",
    locale: "<?php echo $lang->getLocale(); ?>"
  }
};

// Widget loading code
</script>

User Group Integration

Provide different support levels based on Joomla user groups:

<script type="application/javascript">
<?php 
$user = JFactory::getUser();
$userGroups = $user->getAuthorisedGroups();
$isAdmin = in_array(8, $userGroups); // Super Users group ID
$isManager = in_array(7, $userGroups); // Manager group ID
$isRegistered = !$user->guest;
?>

window.pingstreamsSettings = {
  projectid: "your-project-id-here",
  
  // User context and privileges
  userContext: {
    <?php if (!$user->guest): ?>
    id: <?php echo $user->id; ?>,
    username: "<?php echo $user->username; ?>",
    name: "<?php echo $user->name; ?>",
    email: "<?php echo $user->email; ?>",
    groups: [<?php echo implode(',', $userGroups); ?>],
    isAdmin: <?php echo $isAdmin ? 'true' : 'false'; ?>,
    isManager: <?php echo $isManager ? 'true' : 'false'; ?>,
    registrationDate: "<?php echo $user->registerDate; ?>",
    lastVisit: "<?php echo $user->lastvisitDate; ?>",
    <?php endif; ?>
    
    isGuest: <?php echo $user->guest ? 'true' : 'false'; ?>
  },
  
  // Support level based on user group
  supportLevel: "<?php 
    if ($isAdmin) echo 'premium';
    elseif ($isManager) echo 'priority'; 
    elseif ($isRegistered) echo 'registered';
    else echo 'guest';
  ?>",
  
  // Custom responses based on user type
  <?php if ($isAdmin): ?>
  welcomeMessage: "Welcome back, Administrator! How can we assist you with site management?",
  priority: "high",
  <?php elseif ($isManager): ?>
  welcomeMessage: "Hello, Manager! Need help with content or user management?", 
  priority: "medium",
  <?php elseif ($isRegistered): ?>
  welcomeMessage: "Welcome back! How can we help you today?",
  priority: "normal",
  <?php else: ?>
  welcomeMessage: "Hello! Interested in joining our community? How can we help?",
  priority: "normal",
  <?php endif; ?>
};

// Widget loading code
</script>

Content Context Integration

Provide article and category context to the chat:

<script type="application/javascript">
<?php
// Get current page information
$option = JFactory::getApplication()->input->getCmd('option');
$view = JFactory::getApplication()->input->getCmd('view');
$id = JFactory::getApplication()->input->getInt('id');

// Initialize context variables
$contentContext = array();

if ($option == 'com_content') {
  if ($view == 'article' && $id) {
    // Get article information
    $db = JFactory::getDbo();
    $query = $db->getQuery(true);
    $query->select('title, alias, catid, created, modified, hits')
          ->from('#__content')
          ->where('id = ' . $id)
          ->where('state = 1');
    $db->setQuery($query);
    $article = $db->loadObject();
    
    if ($article) {
      $contentContext['type'] = 'article';
      $contentContext['title'] = $article->title;
      $contentContext['alias'] = $article->alias;
      $contentContext['categoryId'] = $article->catid;
      $contentContext['hits'] = $article->hits;
    }
  } elseif ($view == 'category' && $id) {
    // Get category information
    $db = JFactory::getDbo();
    $query = $db->getQuery(true);
    $query->select('title, alias, description')
          ->from('#__categories')
          ->where('id = ' . $id)
          ->where('published = 1');
    $db->setQuery($query);
    $category = $db->loadObject();
    
    if ($category) {
      $contentContext['type'] = 'category';
      $contentContext['title'] = $category->title;
      $contentContext['alias'] = $category->alias;
    }
  }
}
?>

window.pingstreamsSettings = {
  projectid: "your-project-id-here",
  
  // Current page context
  pageContext: {
    option: "<?php echo $option; ?>",
    view: "<?php echo $view; ?>",
    itemId: <?php echo $id; ?>,
    
    <?php if (!empty($contentContext)): ?>
    content: <?php echo json_encode($contentContext); ?>,
    <?php endif; ?>
    
    // Menu information
    <?php 
    $menu = JFactory::getApplication()->getMenu();
    $active = $menu->getActive();
    if ($active): 
    ?>
    menuTitle: "<?php echo $active->title; ?>",
    menuAlias: "<?php echo $active->alias; ?>",
    menuId: <?php echo $active->id; ?>,
    <?php endif; ?>
  },
  
  // SEF URL information
  currentUrl: "<?php echo JUri::current(); ?>",
  baseUrl: "<?php echo JUri::base(); ?>"
};

// Widget loading code
</script>

Extension Integration

Integration with popular Joomla extensions:

VirtueMart Integration (E-commerce):

<script type="application/javascript">
<?php
// Check if VirtueMart is installed and active
$vm_available = JComponentHelper::isInstalled('com_virtuemart') && JComponentHelper::isEnabled('com_virtuemart');
?>

window.pingstreamsSettings = {
  projectid: "your-project-id-here",
  
  <?php if ($vm_available): ?>
  ecommerce: {
    platform: "virtuemart",
    enabled: true,
    
    <?php
    // Get VirtueMart product context if on product page
    $option = JFactory::getApplication()->input->getCmd('option');
    $view = JFactory::getApplication()->input->getCmd('view');
    $virtuemart_product_id = JFactory::getApplication()->input->getInt('virtuemart_product_id');
    
    if ($option == 'com_virtuemart' && $view == 'productdetails' && $virtuemart_product_id):
    ?>
    productContext: {
      id: <?php echo $virtuemart_product_id; ?>,
      view: "productdetails"
    },
    <?php endif; ?>
    
    // Cart context

How to Install Pingstreams on Joomla

Why Install Pingstreams on Joomla?

Prerequisites

Installation Methods

Method 1: Template Editing (Recommended)

Method 2: Custom HTML Module

Method 3: Extensions Integration

Method 1: Template File Editing

Step 1: Get Your Pingstreams Widget Code

Step 2: Access Joomla Template Manager

Step 3: Select Your Default Template

Step 4: Edit the Index.php File

Example Code Placement:

Step 5: Save Changes

Method 2: Custom HTML Module

Alternative Installation via Module

Advanced Joomla Integration Features

Multi-language Site Support

User Group Integration

Content Context Integration

Extension Integration

VirtueMart Integration (E-commerce):