How to create dynamic bot prompts?
- Getting Started
- Bot Building
- Conversation Design
-
Developer Guides
Code Step Integration Static Step Integration Shopify Integration SETU Integration Exotel Integration CIBIL integration Freshdesk KMS Integration PayU Integration Zendesk Guide Integration Twilio Integration Razorpay Integration LeadSquared Integration USU(Unymira) Integration Helo(VivaConnect) Integration Salesforce KMS Integration Stripe Integration PayPal Integration CleverTap Integration Fynd Integration HubSpot Integration Magento Integration WooCommerce Integration
- Deployment
- Agent Setup
- Analytics & Reporting
- Proactive Messaging
- Commerce Plus
- Troubleshooting Guides
- Release Notes
Table of Contents
Dynamic Bot Prompt TriggersHow to create Dynamic Bot Prompt Triggers?1: Add it to your HTML code2: Create a JavaScript functionDynamic Bot Prompt Triggers
Dynamic Bot Prompt Triggers change based on the user's activity on the webpage.
How to create Dynamic Bot Prompt Triggers?
1: Add it to your HTML code
To set up the Bot Prompt when the user hovers on a specific field or area of the webpage, you will have to set which Bot Prompt needs to get triggered.
When the user hovers on the "i" symbol besides Year Built, a Bot Prompt is triggered.
The following is the sample code of how the bot prompt is set on the hover of the "i" symbol and what messages will be sent.
<div class="form-group row">
<div class="col-sm-5">
<label for="staticEmail"
class="col-sm-2 col-form-label set_inline bot_message"
data-bot_says="Will the year affect my quote?"
data-bot_prompt=" Why is year required?/-/-/Don't remember the year">
<i class="fa fa-info-circle bot_message"
data-bot_says="Will the year affect my quote?"
data-bot_prompt=" Why is year required?/-/-/Don't remember the year"></i>
Year Built
</label>
</div>
<div class="col-sm-7">
<input type="date" class="form-control" placeholder="1234567890">
</div>
</div>
2: Create a JavaScript function
Bot Prompt Triggers can be initiated at different instances i.e. when the user clicks on some button or textarea, or when the user hovers over some text or button on the page.
The following is the sample code for triggering the bot prompt on hovering over the i symbol.
var tOut;
$('.bot_message').hover(function() {
let message = $(this).data('bot_prompt')
message = message.split("/-/-/");
console.log("hover timer started ----");
tOut = setTimeout(function() {
console.log("5 sec up")
if (message.length > 1) {
let prompt_msg = []
message.map((item, i) = > {
prompt_msg.push({
"title": item,
"userMessage": item
})
})
HaptikSDK.prompt("Ask me if you have any such questions 👇", "", prompt_msg)
} else {
HaptikSDK.prompt(message[0], message[0])
}
}, 2000);
}, function() {
clearTimeout(tOut);
console.log("timer reset")
});