Sunshine Conversations (v2)

Integrate with Sunshine Conversations so your users can chat with your inGenious AI chatbot alongside your other connected channels. 

Sunshine Conversations version 1 and 2

We recommend connecting your inGenious AI chatbot to Sunshine Conversations version 2. If you need to features only available in Sunshine Conversations version 1, see the version 1 instructions.

To integrate your chatbot with Sunshine Conversations:

  1. Create an app in Sunshine Conversations, if you don't already have one.
  2. Connect your inGenious AI chatbot to your Sunshine Conversations App.

Once you have integrated your chatbot with your Sunshine Conversations app, you can connect channels from Sunshine Conversations, such as the Smooch Web Messenger.

Let’s look at each of those steps in detail.

Step 1: Create an app in Sunshine Conversations

If you do not already have a Sunshine Conversations app you want to connect to:

  1. Log into your Sunshine Conversations dashboard.
  2. Create an app in Sunshine Conversations.
    Name your app something you will remember.
  3. Click Create App.
  4. Connect the messaging channels you want to use to your Sunshine Conversations app.

Refer to the Sunshine Conversations documentation on integrating your chosen channel.

Step 2: Connect your inGenious AI chatbot

Before you start

Make sure you're logged into your Sunshine Conversations account.

  1. Open inGenious AI.
  2. Add a Sunshine Conversations channel to your chatbot:
    1. Open the team and  chatbot you want to integrate and click Manage.
    2. Click Channels.
    3. Click + Channel.
    4. Click Sunshine Conversations v2.
  3. Click the new Sunshine Conversations card.
  4. Click Connect to Sunshine Conversations.
    Your browser will launch your Sunshine Conversations dashboard in a popup window.
    If you do not see the dashboard, check your browser's popup blocker.
  5. If prompted, log in to your Sunshine Conversations account.
  6. Select the app you want to connect to Sunshine Conversations.
    This is the app you created in the first step.
  7. Click Allow.

Your browser will return to the inGenious AI platform, and populate the Sunshine Conversations integration settings. Once your chatbot is published, you can connect your Sunshine Conversation messaging channels.

Example: Add the Smooch Web Messenger widget to your website

Sunshine Conversations offers several different messaging channels you can connect to. This example guides you through connecting the Smooch Web Messenger:

  1. Connect the Smooch Web Messenger and find your integration ID
  2. Add the Smooch Web Messenger widget to your website.
  3. Initialise the Smooch Web Messenger 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:

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

Add the Smooch Web Messenger widget

Add this script near the end of the <head> section of your web pages, and replace <integration-id> with the integration ID you copied previously.

<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

smooch_guide.jpeg

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

  1. 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.
  2. Replace <integration ID> with the Integration ID that was copied from the previous step.
  3. 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 = 'http://www.personal.psu.edu/crd5112/photos/GIF%20Example.gif'; } doc.body.appendChild(style);

ingeniousai.updateUser({ metadata: { entryPoint: '<entry point name>' }}); }); </script>
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.