Installing widget on selected pages

This tutorial guides you through setting up the Pingstreams live chat widget to display only on selected pages of your website. By leveraging a custom script, you can include or exclude the widget based on the page’s URL. The script checks the current URL and decides whether to load the Pingstreams widget based on defined conditions, and it includes functions for login, logout, and custom authentication.

Step 1: Define Included/Excluded Pages

The script checks the current URL to decide if the widget should be loaded. Here’s how you can set up exclusions:

const projectId = "63b711fa2ef2e4001a5e4977";
let attributes = {};

if (
(window.location.href.indexOf('/cds') >= 0) ||
(window.location.href.indexOf('%2Fcds') >= 0) ||
(window.location.href.indexOf('/dashboard') >= 0) ||
(window.location.href.indexOf('%2Fdashboard') >= 0)
) {
// Pages to exclude: do not start the widget
} else if (
((window.location.href.indexOf('/login') >= 0) ||
(window.location.href.indexOf('%2Flogin') >= 0) ||
(window.location.href.indexOf('/signup') >= 0) ||
(window.location.href.indexOf('%signup') >= 0)
) && screen.width < 800
) {
// Also exclude these pages on mobile devices
} else {
// startWidget()
}

In this code, replace /cds, /dashboard, /login, etc., with the specific paths on your domain where you want to exclude or include the widget.

Step 2: Define the startWidget Function

The startWidget function loads the Pingstreams widget with the desired configuration, setting up the project ID and auto-start behavior.

function startWidget(){
window.pingstreamsSettings = {
projectid: projectId,
autoStart: true
};

(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'));
}

Step 3: Additional Control Functions

The following functions provide additional control over the widget’s behavior:

• pingstreams_widget_hide(): Hides the widget.
• pingstreams_widget_show(): Shows the widget.
• pingstreams_widget_login(attribute): Logs in the user with a custom attribute.
• pingstreams_widget_logout(): Logs out the user and signs in anonymously.

These functions help manage the widget’s state on different pages.

Step 4: Custom Authentication

The customAuth function sends user data to a custom authentication URL, receiving a JWT token that is used to sign in the user with Pingstreams.

function customAuth(callback) {
const storedUser = localStorage.getItem('user');
let user = storedUser ? JSON.parse(storedUser) : null;

if (!user) {
callback(null);
return;
}

const remote_support_project_userId = projectId + "_" + user._id;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "https://pingstreams-custom-jwt-authentication.example.com/pingstreamsauth", true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function () {
if (callback && xmlhttp.readyState == 4 && xmlhttp.status == 200 && xmlhttp.responseText) {
callback(xmlhttp.responseText);
}
};
xmlhttp.send("id=" + remote_support_project_userId + "&firstname=" + user.firstname + "&lastname=" + user.lastname + "&email=" + user.email);
}

Step 5: Testing and Verification

1. Verify Included/Excluded Pages: Visit the included pages to confirm the widget appears, and the excluded pages to ensure it remains hidden.
2. Test Login/Logout: Confirm that login and logout behaviors are working as expected, especially for the custom authentication flow.

This script provides granular control over where the Pingstreams widget appears, enhancing the user experience by excluding it from specific pages and enabling custom authentication.