Home > Multiple Widgets: Tips and Best Practices

Categories: Tips & Tricks

About This Article

The purpose of this article is to provide a comprehensive overview of Tips and Best Practices for Multiple Widgets.

This article will show you a step by step on how to install more than one widget.

There are a number of scenarios where you might want to use Multiple Widgets to segment various types of chat teams. The most common being separate widgets for Sales and Support teams. Others might include: one widget for each language your support team speaks, or different escalation levels of technical support, or any number of possibilities.

Using Multiple Widgets gives you great power and flexibility, but when you want to use more than one widget on a single page there are a few important caveats to understand, and there are a couple of different implementations for different use cases.

Please be forewarned, this is a fairly technical document, and you may need your Web Developer to assist you with this.

A quick primer

The first thing to understand is that some of your SnapEngage settings “live” inside the Javascript file you load, and some others “live” in our backend system. So the two methods outlined below are intended for different use cases.

In brief, here are the types of settings that “live” in your Javascript file — these will not change after you call .switchWidget():

• Style Tab settings. (Including: chat box design, floating button images, pre-chat form.)
• Proactive chat rules.
• Configured messages.

Method 1: Using .switchWidget()

Pros: Change widgets on the fly; usable inside a link’s onclick attribute.

Cons: Will not change the style of your widget; will not change your proactive chat settings; will not change your custom messages.

See .switchWidget() documentation on our Developer API site.

With this method, the most common setup would be the following:

• Have two buttons near each other, which might say something like, “Chat with Sales,” and “Chat with Support.”
• When you click to chat with “Sales” the .switchWidget() function routes your chat to the “Sales” widget.
• The “Support” button does the same for the “Support” widget.
• Make sure to only the SnapEngage code snippet once on your page. Whichever widget ID code you load will be the default widget styling you will see.

How the implementation might go:

• Configure an inline button for your Sales Widget.
• Configure an inline button for your Support Widget.
• Add both of these inline buttons to your website.
• Inside the onclick attribute of the inline button’s <a> element, you would add (to the beginning):
• SnapEngage.switchWidget( ‘xxxxx-xxxxxx-xxx-xxxxx-xxx’ );
• Note: You can get your Widget IDs at https://www.snapengage.com/getwidgetid, or in your “Get The Code” tab. 
• Make sure to only the SnapEngage code snippet once on your page. Whichever widget ID code you load will be the default widget styling you will see. 

Example code snippet:
<a href="#">
<img src="https://www.snapengage.com/statusImage?w=xxxx-xxxx-xxxx-xxxx-xxxx" alt="Contact us" border="0" /> </a>

<a href="#">
<img src="https://www.snapengage.com/statusImage?w=yyyy-yyyy-yyyy-yyyy-yyyy" alt="Contact us" border="0" /> </a> 

Please note: This code is for example purposes only, it will not function as is.

Method 2: Pre-determining the widget to load

Pros: Load the correct widget’s Javascript file on page load, including all style, proactive, and messaging settings.

Cons: Slightly more technical implementation.

With this method, you use Javascript to determine the correct widget to load in a given scenario.

Example scenario:

• You have a website offered in both English and Spanish.
• You have a separate widget for your English-speakers and your Spanish-speakers.
• The two versions of the website load the same SnapEngage code snippet.

How the implementation might go:

• Just above the beginning of the SnapEngage code snippet function call — above the line that starts with (function() {, you determine which Widget ID you need to load, and assign it to a variable, perhaps called seWidget.
• Determining which widget to load is up to your Web Developer(s), because every site will be different.
• Inside the SnapEngage code snippet, you’ll see that the name of the Javascript file being loaded is actually the Widget’s ID.
• You would add the seWidget variable to src string in place of the file name.

Example code snippet:

// ![CDATA[
  var seWidget = 'xxxx-xxxx-xxxx-xxxx-xxxx'; // English Widget ID
  if (myDeterminedLanguageVariable === 'es') {
    seWidget = 'yyyy-yyyy-yyyy-yyyy'; // Spanish Widget ID
  }
 (function() {
   var se = document.createElement('script'); se.type = 'text/javascript'; se.async = true;
   se.src = '//commondatastorage.googleapis.com/code.snapengage.com/js/' + seWidget + '.js';
   var done = false;
   se.onload = se.onreadystatechange = function() {
   if (!done&&(!this.readyState||this.readyState==='loaded'||this.readyState==='complete')) {
     done = true;
     /* Place your SnapEngage JS API code below */
     /* SnapEngage.allowChatSound(true); Example JS API: Enable sounds for Visitors. */
     }
   };
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(se, s);
 })();
// ]]>

Please note: This code is for example purposes only, it will not function as is.

Did you find this article helpful?

(8 votes, average: 3.25 out of 5)

 Loading ...