Sunshine(v2) Example channel: Smooch Web Messenger

Sofie Bird

31 March 2022 23:57

Sunshine Conversations offers several different messaging channels you can connect to. This example guides you through connecting the Smooch Web Messenger after you have connected your inGenious AI chatbot:

Connect the Smooch Web Messenger and find your integration ID
Add the Smooch Web Messenger widget to your website.
Initialise the Smooch Web Messenger widget.

You can also customise the web widget.

Connect Smooch Web Messenger and find your Integration ID

Tip: Have Notepad or a similar text editor open to copy your integration ID into.

To find your Integration ID:

Log into the Sunshine Conversations dashboard.
Go to the app that you have integrated with inGenious AI.
Connect to the Web Messenger integration in the Sunshine Conversations dashboard.
Click Confirm Integration.
Copy the Integration ID from the Web Messenger integration page into Notepad.

Add the Smooch Web Messenger widget

Add this code within the <head> section of your web pages.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Add this script near the end of the <head> section of your web pages.

<script>
  !function (s, p, o, c) { var i, a, u, f = [], h = []; function e() { var n = "You must provide a supported major version."; try { if (!c) throw new Error(n); var e, t = "https://web-messenger-v5.ingenious.ai/", r = "ingeniousai"; if ((e = "string" == typeof this.response ? JSON.parse(this.response) : this.response).url) { var s = p.getElementsByTagName("script")[0], o = p.createElement("script"); o.async = !0; var i = c.match(/([0-9]+)\.?([0-9]+)?\.?([0-9]+)?/), a = i && i[1]; if (i && i[3]) o.src = t + r + "." + c + ".min.js"; else { if (!(1 <= a && e["v" + a])) throw new Error(n); o.src = e["v" + a] } s.parentNode.insertBefore(o, s) } } catch (e) { e.message === n && console.error(e) } } s[o] = { init: function () { i = arguments; var n = { then: function (e) { return h.push({ type: "t", next: e }), n }, catch: function (e) { return h.push({ type: "c", next: e }), n } }; return n }, on: function () { f.push(arguments) }, render: function () { a = arguments }, destroy: function () { u = arguments } }, s.__onWebMessengerHostReady__ = function (e) { if (delete s.__onWebMessengerHostReady__, s[o] = e, i) for (var n = e.init.apply(e, i), t = 0; t < h.length; t++) { var r = h[t]; n = "t" === r.type ? n.then(r.next) : n.catch(r.next) } a && e.render.apply(e, a), u && e.destroy.apply(e, u); for (t = 0; t < f.length; t++)e.on.apply(e, f[t]) }; var n = new XMLHttpRequest; n.addEventListener("load", e), n.open("GET", "https://web-messenger-v5.ingenious.ai/loader.json", !0), n.responseType = "json", n.send() }(window, document, "ingeniousai", "2");
</script>

Initialise the Web Messenger widget

Add this script to the end of the <body> section of your web page, and then:

Replace <conversation display name> and <conversation description> with the name and description you want the user to see. See the image above for visual reference.
Replace <integration ID> with the Integration ID that was copied from the previous step.
Replace <entry point name> with the entry point that you want the user to see when starting a conversation for the first time.

<script>
  ingeniousai.on('widget:opened', function () {
     if (ingeniousai.getConversations().length === 0) {
       ingeniousai.createConversation({
         displayName: '<conversation display name>',
         description: '<conversation description>'
       });
     }
   });
 
   ingeniousai.init({ integrationId: '<integration ID>' }).then(function () {
     // Patch to allow carousel title text to wrap.
     let myiFrame = document.getElementById("web-messenger-container");
     let doc = myiFrame.contentDocument;
     let style = doc.createElement("style");
     style.innerHTML = ".carousel-title { white-space: normal; };";
     doc.body.appendChild(style);
  
     // Optional line to start an alternate entry point. To use default entry point,
     // remove this line.
     ingeniousai.updateUser({ metadata: { entryPoint: '<entry point name>' }});
   });

</script>

Removing the Sunshine Conversations channel

If you want to disconnect your inGenious AI chatbot from Sunshine Conversations, you must remove it manually in your Sunshine Conversations account.

Customise the web widget

This section requires some knowledge of JavaScript and CSS.

You can modify the init script to modify the appearance of your Web Messenger by injecting properties to the style object or modifying the HTML elements directly. The following example replaces the chat icon with a GIF.

<script>
ingeniousai.init({
  ...
}).then(function() {
  // Patch to allow carousel title text to wrap.
  let myiFrame = document.getElementById("web-messenger-container");
  let doc = myiFrame.contentDocument;
  let style = doc.createElement("style");
  style.innerHTML = ".carousel-title { white-space: normal; };";
  
  // Replace app icon with a GIF
  let elements = doc.getElementsByClassName('app-icon');
  
  if (elements.length > 0) {
    elements[0].src = '<URL to gif>';
  }
  
  doc.body.appendChild(style);

  ingeniousai.updateUser({ metadata: { entryPoint: '<entry point name>' }});
});
</script>