Home > How to load one widget or another depending on variables

Categories: Customization | Tips & Tricks | JavaScript API | Technical Options | Design Studio

---

(Last Updated On: )

About this Article-

This article goes over how to load a different widget based off variables.

Most of our customers would choose which widget they want to install where, and install them accordingly on those pages. However, if you are running more of a complex operation, where you may want to detect some specific settings to determine which widgets to load, we can help with that!  In that case you may want to load one widget or another depending on different variables you can expose from your website. This article will show you how to do this.

In this example, we are not going to install any specific widgets, but we are going to determine which widget to load depending on which language the website is being shown on.  This is only a template, but the idea is to show how to load a widget or another, the conditions for the loading of one or another widget can be determined by you on the javascript, by using variables on your code.

<script type="text/javascript">

  var language = (window.location.toString().indexOf('language=fr') != -1 ? 'fr' : 'en');
  var widgetId = '';
  switch (language) {
    case 'fr': widgetId = 'b9341ff4-xxxx-476f-802e-031ecf5391cf'; break;
    case 'en': widgetId = '1e309c41-ffff-4aa2-8a72-06f64e0fd34b'; break;
    default: widgetId = 'Default-Widget_ID'; break;
  }


  (function() {
    var se = document.createElement('script'); se.type = 'text/javascript'; se.async = true;
    se.src = '//storage.googleapis.com/code.snapengage.com/js/' + widgetId + '.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);
  })();
</script>
<!-- end SnapEngage code --> 

With this example code, we are determining the language on the address bar (language=fr or language-en), and loading one widget or another accordingly using the switchWidgetId function. We are also setting a default widget to be loaded in case the language in the address bar doesn’t match either. Once you determine the variable on your website, you will be able to use this template to load your widgets.

You can also contact us on [email protected] to discuss further or start a chat with us.

---

Published August 8, 2018

---