Developers

Promotional Message

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.

Adapter code and public Github repository

This adapter can be found in the Inbenta Github adapters repository.

Click here to see the adapter code

Configuration

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