Sunshine(v2) Example channel: Smooch Web Messenger

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:

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

You can also customise the web widget, and configure when the widget opens on your dekstop and mobile pages.

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

Once your chatbot is connected to Sunshine Conversations, the Sunshine Conversations integration page provides script templates to add the widget to your website. The templates have placeholders for your integration ID. You can fill these placeholders automatically by pasting in your integration ID before you copy the templates.

In the inGenious AI platform:

  1. Open the team and chatbot you have integrated with Sunshine Conversations.
  2. Click Manage in the left navigation, then click Integrations.
  3. Click the Sunshine Conversations integration.
  4. In the Integration ID field, paste the integration ID you copied earlier.
    The integration ID will be populated in the script templates.
  5. Below the Widget Header Code section, click the copy to clipboard link.
  6. Paste the copied script near the end of the <head> section of your web pages.
  7. Scroll down to the Widget Body Code section and click the copy to clipboard link.
  8. Paste the copied script near the end of the <body> section of your web pages.
  9. Replace the <placeholder text> for the conversation displayName and description near the top of the pasted code.
    See the diagram below for a demonstration:
    smooch_guide.jpeg

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>
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.