Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Go to Haptik Website
  • Join the Community
  • Contact Us
  • Home
  • Deployment
  • Web SDK

How to have a custom icon for my website bot?

Written by Medha Anand

Updated on August 23rd, 2021

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Getting Started
    Build Deploy Analyse Manage Account
  • Bot Building
    Essentials Smart Skills Steps User Messages Bot Responses Entities Connections Customisations User feedback collection Testing Whatsapp Bots NLU
  • Conversation Design
    Conversation Design for Whatsapp Bots
  • Developer Guides
    Code Step Integration Static Step Integration Shopify Integration SETU Integration Exotel Integration CIBIL integration Freshdesk KMS Integration PayU Integration Zendesk Guide Integration
  • Deployment
    Web SDK Whatsapp Facebook Instagram Sunshine Conversation LINE Google Business Messages Telegram MS Teams Bot as an API iOS SDK Android SDK
  • Agent Setup
    Haptik's Smart Agent Chat Zendesk Chat Salesforce Service Cloud Freshchat Zoho NICE CXOne
  • Analytics & Reporting
    Intelligent Analytics
  • Troubleshooting Guides
    Error Messages FAQs
  • Release Notes
+ More

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>

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • How to deploy a logged-in bot on my website?
  • How to set up a launch message on my website bot?
  • How to deploy a bot on my website?
  • How to customise my website bot?

Platform

  • Conversation Studio
  • Smart Skills
  • Advanced NLU
  • Intelligent Analytics
  • Omnichannel
  • Smart Agent Chat
  • Enterprise Security
  • Integrations

Solutions

  • Conversational Commerce
  • Lead Generation
  • Customer Care
  • WhatsApp
  • Conversational IVR
  • Google Business Messages

Industries

  • Retail/ E-Commerce
  • Financial Services
  • Travel & Hospitality
  • Telecom

Knowledge

  • ROI Calculator
  • Reports & Research
  • Case Studies
  • Webinars
  • ISAT
  • Tech Blog
  • Business Blog
  • Resources
  • Haptik v/s Yellow
  • Haptik v/s Liveperson
  • Haptik v/s IBM Watson
  • Haptik v/s Verloop
  • Conversations on AI

Company

  • Why Haptik
  • About Us
  • Careers
  • News & Media
  • Awards & Recognition
  • Contact Us
  • Partnerships
  • Investor Relations

Subscribe

Sign up to recieve the latest updates

Find us on

  • Twitter-footer
  • Linkedin-footer
  • YT-footer
  • Insta-footer
  • G2-footer
  • Facebook-footer

Copyright © jio Haptik Technology Limited 2021 | Data Security & Privacy Policy | GDPR

North America | Asia Pacific | Africa | enterprise@haptik.ai

Definition by Author

0
0