Authorization
API Resources
NL Interpreter
Search
Assist
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 Chat 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 Chat 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
sideWindowDataandconversationWindowData, and we execute both displayChatbotMessage and showSideWindow actions. - In future
showConversationWindowactions, we will only execute thereturn next()in order to call theshowConversationWindowaction, 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:
