
Chatbot
Chatbots are digital tools that simulate human conversation using AI and NLP, offering 24/7 support, scalability, and cost-effectiveness. Discover how chatbots ...
Unlock advanced FlowHunt chatbot features: personalize with flow variables, track with URL suffixes, use event handlers, and control chat activation for a tailored user experience.
Flowhunt is packed with strong features that allow deep customization of how your chatbot behaves and seamlessly integrates with your site or application. In this page, you learn to perform some advanced customizations – flow variables, URL parameters, event-driven callbacks, and a custom chat activation logic.
Flow variables provide a means of passing in dynamic data to the chatbot so that it may be truly personalized. You can store anything inside these variables; it could be user data, session data, or any information of relevance.
The flowVariable
is part of FHChatbot.initChatbot()
configuration. It’s an object where each key-value pair defines a variable and its value. Example – Passing user’s IP address and user id:
<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) {
var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
var rs=this.readyState;
if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
c(this);
};
t.parentElement.insertBefore(s,t.nextSibling);
})(document,
'https://app.flowhunt.io/fh-chat-widget.js',
function(e){
FHChatbot.initChatbot({
chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
headerTitle: 'URLsLab FAQ Generator',
maxWindowWidth: '700px',
"flowVariable": {
"ip": /* Code to obtain IP Address */ ,
"userId": /* Code to obtain User ID */
}
});
}
);
</script>
Important Notes:
/* Code to obtain IP Address */
and /* Code to obtain User ID */
with your actual logic to retrieve these values from your system. This often involves accessing server-side variables, local storage, or relying on other authentication methods.The urlSuffix
parameter allows you to append a query string to the end of every URL called by the chatbot. This is invaluable for tracking the origin and effectiveness of your chatbot interactions using analytics tools like Google Analytics.
How to Use urlSuffix
Simply set the urlSuffix
property to your desired query string, as follows:
<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) {
var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
var rs=this.readyState;
if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
c(this);
};
t.parentElement.insertBefore(s,t.nextSibling);
})(document,
'https://app.flowhunt.io/fh-chat-widget.js',
function(e){
FHChatbot.initChatbot({
chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
headerTitle: 'URLsLab FAQ Generator',
maxWindowWidth: '700px',
"urlSUffix": "?utm_source=your-custom-source"
});
}
);
</script>
In this example, ?utm_source=your-custom-source
will be appended to all URLs initiated by the chatbot, allowing you to track chatbot traffic in your analytics platform.
Flowhunt allows you to set up event handlers that trigger custom functions when certain events occur in the chatbot. These handlers give you precise control over the user experience. The main event handlers include:
onSessionCreated
: Triggered when a new chatbot session is initiated (restarting the session also counts!).onWindowOpened
: Triggered when the chatbot window is opened.onWindowClosed
: Triggered when the chatbot window is closed.onError
: Triggered when there’s an error in the chatbot.onMessageReceived
: Triggered when the bot sends a message and when a user sends an input.onMessageSent
: Triggered when the user sends a message.How to Use Event Handlers
You can set up handlers using the fhChatbot
variable returned by FHChatbot.initChatbot
, and add listeners like fhChatbot.onSessionCreated()
. Here is an example:
<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
// catch event when chatbot is ready on your page
window.addEventListener("onFHChatbotReady", (e) => {
console.log("Chatbot is ready, chat button should be visible at this time ready to be clicked.");
});
(function(d, src, c) {
var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
var rs=this.readyState;
if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
c(this);
};
t.parentElement.insertBefore(s,t.nextSibling);
})(document,
'https://app.flowhunt.io/fh-chat-widget.js',
function(e){
const fhChatbot = FHChatbot.initChatbot({
chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
headerTitle: 'URLsLab FAQ Generator',
maxWindowWidth: '700px',
"urlSUffix": "?utm_source=asdfsdfgsdg"
});
fhChatbot.onSessionCreated(function () {
// Custom logic when the session is created, could fire API calls, or store data
console.log("session started");
});
fhChatbot.onWindowOpened(function () {
// custom logic when the window opens, or show some content above the chat
console.log("window opened");
});
fhChatbot.onWindowClosed(function () {
// custom logic when the window is closed, or show some content above the chat
console.log("window closed");
});
fhChatbot.onError(function (e) {
// custom logic when an error is fired, could track it on error tracking tool.
console.log(e.metadata);
console.log("window error");
});
fhChatbot.onMessageReceived(function (e) {
// custom logic when the bot answered.
console.log("chatbot answered");
});
fhChatbot.onMessageSent(function (e) {
// custom logic when the user sent an input.
console.log("user sent an input");
});
}
);
</script>
Each event handler function can execute custom logic to make your chatbot behave dynamically to your user’s behavior.
Use Cases:
onSessionStart
and other events to send valuable metrics.By setting showChatButton: false
, you can hide the default chat button. Then, you can programmatically open or close the chatbot window based on your own custom logic. This gives you ultimate control of the user interface.
How to Use Custom Activation
FHChatbot.initChatbot()
options, add: showChatButton: false
.fhChatbot.openChat()
and fhChatbot.closeChat()
methods to control visibility based on your custom events.<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) {
var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
var rs=this.readyState;
if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
c(this);
};
t.parentElement.insertBefore(s,t.nextSibling);
})(document,
'https://app.flowhunt.io/fh-chat-widget.js',
function(e){
const fhChatbot = FHChatbot.initChatbot({
chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
headerTitle: 'URLsLab FAQ Generator',
maxWindowWidth: '700px',
"urlSUffix": "?utm_source=asdfsdfgsdg",
"showChatButton": false
});
// Example: if user clicks on a button
const customChatButton = document.getElementById("myCustomChatButton")
customChatButton.addEventListener("click", () => {
fhChatbot.openChat();
});
// Example: if user closes by using a custom close button
const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
customCloseChatButton.addEventListener("click", () => {
fhChatbot.closeChat();
});
}
);
</script>
In this example, we added listeners to custom buttons to either open or close the chat.
Benefits:
By using flow variables, URL suffixes, event handlers, and custom chat activation, you can create highly customized and engaging chatbot experiences with Flowhunt. These advanced options provide you with the tools to fine-tune your chatbot to perfectly match your business needs and your users’ expectations.
Flow variables allow you to pass dynamic data—such as user or session information—into your FlowHunt chatbot. This enables personalized and context-aware conversations tailored to each user.
Use the urlSuffix parameter to append custom query strings to every URL called by the chatbot. This makes it easy to track chatbot-originated traffic and conversions in analytics tools like Google Analytics.
FlowHunt supports event handlers such as onSessionCreated, onWindowOpened, onWindowClosed, onError, onMessageReceived, and onMessageSent, giving you full control over chatbot-driven user interactions.
Set 'showChatButton' to false to hide the default button, then use fhChatbot.openChat() and fhChatbot.closeChat() to open or close the chatbot based on your custom logic or user actions.
Advanced customization lets you personalize user journeys, integrate analytics, trigger dynamic actions, and seamlessly match the chatbot experience to your site's design and business needs.
Take your chatbot to the next level with FlowHunt's advanced JS API features. Personalize, analyze, and control every aspect of your AI chatbot.
Chatbots are digital tools that simulate human conversation using AI and NLP, offering 24/7 support, scalability, and cost-effectiveness. Discover how chatbots ...
Power up your HubSpot chatbot with FlowHunt. Get better control over replies, data sources, and conversation flows.
Short on content ideas or just curious what people on the internet talk about? Try our AI tool to find out and learn how to build your own.