How to have a custom icon for my website bot?
Written by Medha Anand
Updated on September 7th, 2021
- Getting Started
- Bot Building
- Smart Agent Chat
- 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 Microsoft Dynamics 365 Integration
- Deployment
- External Agent Tool Setup
- Analytics & Reporting
- Notifications
- Commerce Plus
- Troubleshooting Guides
- Release Notes
You can use a custom chat button instead of the default one that comes with the SDK.
Within haptikInitnitSettings we need to add the following setting. This will initialize the SDK with the custom button.
window.haptikInitSettings = {
.
.
.
'custom-button': true,
.
.
};
Since we are using a custom button we would need to programmatically expand or condense the SDK on click of our custom button depending on the behavior of our button. The HaptikSDK provides us HaptikSDK.show() and HaptikSDK.hide() methods which we can use for opening or closing the SDK.
Full Example:
<!DOCTYPE html>
<html>
<head>
<title>Haptik JS SDK Custom Icon Demo</title>
<meta charset="UTF-8">
<meta content="width=device-width; initial-scale=1.0;" name="viewport">
<style>
.custom-icon {
position: absolute;
right: 0;
bottom: 0;
padding: 35px;
width: 150px;
cursor: pointer;
}
</style>
</head>
<body>
<div style="width: 100%; padding-top: 100px;">
<div style="max-width: 7000px; margin: 0 auto; padding: 0 40px; text-align: left;">
<h4>Haptik JS SDK</h4>
<h6>Custom Icon example</h6>
Steps: <br/>
1) While defining haptikInitSettings simply add 'custom-button': true <br/>
2) Add your icon, in this case we have directly used an img tag <br/>
3) On click of the icon, create a function that simply calls 'HaptikSDK.show()' <br/>
<img onClick="openChat()" src="https://s3.ap-south-1.amazonaws.com/tools-cdn/js-sdk/images/custom-chat-icon.png" class="custom-icon">
</div>
</div>
</body>
<script type="text/javascript">
window.haptikInitSettings = {
'business-id': '<provided by haptik>',
'client-id': '<provided by haptik>',
'base-url': '<provided by haptik>',
'custom-button': true
};
</script>
<script type="text/javascript" charset="UTF-8" src="https://toolassets.haptikapi.com/platform/javascript-xdk/production/loader.js"></script>
<script>
function openChat() {
HaptikSDK.show()
}
</script>
</html>