Feature Example

Promotion on showConversationWindow

In this scenario, we have a new product, and we want to present it to every user that interacts with the Chatbot SDK. We will show information about this new product in the conversation window, and we will open the side window with an image and a URL so they can see all the information.

The first step is to build the adapter. To follow best practices, we build it in an external js file:


/**
 * This adapter creator export an adapter that shows a promotional message when the conversation window is shown.
 */
function createPromotionOnShowConversation() {
  return function(chatBot){
    //variable to control that the promotion will be shown only the first time the ConversationWindow shown
    let isConversationShown = false;
    chatBot.subscriptions.onShowConversationWindow(function(next) {
      if (isConversationShown) {
        // if isConversationShown is true, execute the next callback
          return next();
      }
      //conversationWindow message
      const conversationWindowData = {
        type:'answer',
        message:'hello, we have a new special promotion just for you!',
        options:null,
      }
      //sideWindow information
      const SideWindowData = {
        sideWindowContent: "<p>We have this new product, check it out here!</p>"
      +"</p><img src='https://www.inbenta.com/wp-content/themes/inbenta/img/icons/inbentabot.svg' alt='Mountain View' width='500' height='377'>"
      +"<p><a href='https://www.inbenta.com/en/features/chatbots/'>Check our new Chatbot!</a></p>",
        sideWindowTitle: "Special Promotion fake Product",
      }
      //display a chatbot message in conversationWindow
      chatBot.actions.displayChatbotMessage(welcomeMessageEnd);
      //display more information in the sideWindow
      chatBot.actions.showSideWindow(SideWindow);
      //sets to true in order to show the promotion only the first time
      isConversationShown = true;

      return next();
    });
  }
}

Every time the showConversationWindow action is executed, the subscription will be triggered.

The return function statement is mandatory in order to return the adapter function, which must have the chatbot instance, to be able to dispatch actions and run the subscription.

We have two different user cases:

  • The first time, we want the promotion to display, so we build the sideWindowData and conversationWindowData, and we execute both displayChatbotMessage and showSideWindow actions.
  • In future showConversationWindow actions, we will only execute the return next() in order to call the showConversationWindow action, but not display any additional data.

Note: Remember that if no next() statement is executed, the actual showConversationWindow action is not executed.

With the adapter already build in adapters/product_promotion.js, we can now run the build function in our index.php.

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <script src="https://sdk.inbenta.io/chatbot/1/inbenta-chatbot-sdk.js"></script>
</head>
<body style="background-color:#eee;">
</body>
</html>
<script src="/adapters/product_promotion.js"></script>
<script>
  var authorization = {
    domainKey:"<example_domain_key>",
    inbentaKey:"<example_inbenta_key>"
  }
  const config = {
      labels: {
        en: {
          'interface-title' : 'Inbenta Promotion SDK'
        }
      },
      launcher: {
        title:"Inbenta SDK"
      },
      adapters: [
          createPromotionOnShowConversation(),
      ]
  };
  InbentaChatbotSDK.buildWithDomainCredentials(authorization,config);
</script>

Inside the build() method, the config object is a basic configuration with the interface title label and a launcher setting, as referenced in adapters. Inside the adapters array, we make the function call defined in the adapters/product_promotion.js

The adapter result looks like this: promotion_adapter