Kindly Chat
Widget API
the widget api enables you to interact with the kindly chat embedded on your website kindly chat is a feature rich and customizable chat client for the web new versions packing features and updates are made available continuously you can read more on https //docs kindly ai/api/chat#m 9r below get the html snippet start by navigating to your bot in the https //app kindly ai select connect from the left hand menu, then click kindly chat publish your chatbot under the heading get html code go ahead and copy it by hitting copy to clipboard you'll need this code to embed kindly chat on your site the html snippet should look something like this a https //docs kindly ai/api/chat#e2tal is also available deploying kindly chat once you have copied the snippet, you're ready to add kindly chat to your site this should be a simple process that involves updating an html template put the snippet in your html template, between the \<head> or \<body> tags if this sounds strange, foreign, or scary, we recommend you contact your website administrator or a developer in your organization for further assistance using google tag manager? when using google tag manager (gtm), the script needs to be added programmatically this means the html snippet won't work, as gtm won't be able to load its attributes like data bot key when adding a new tag, choose the "custom html" option and paste the following snippet into the editor one thing worth noting when implementing with gtm, is that the chat bubble can be hidden for some users using an ad blocker extension therefore we do recommend implementing the chat bubble directly into the source code, or via a cms if possible customizing there are two options available for configuring kindly chat appearance and behaviour set default settings directly through the https //app kindly ai override the default settings using options in your site html ( window\ kindlyoptions ) this allows for per page customization see the section https //docs kindly ai/api/chat#ii4st for a list of supported options set default behaviour and appearance start by navigating to your bot in the https //app kindly ai from the left hand menu, open settings , then go to kindly chat configure the bot behaviour and appearance according to your needs override behaviour or appearance per page sometimes kindly chat needs slightly different behaviour or appearance depending on the page the user is visiting this can be accomplished by adding options to the original html snippet use the following html snippet for overriding the settings remember to replace the part that says 'your bot key' with the value from your original html snippet note in this example, available options have been commented out to activate an option, uncomment the line by removing "//" from the start of the line set initial language if you need to pre configure which language the bot should use to greet the user, just set window\ kindlyoptions language to docid\ jtm5dxgyrj99xvjkxgkdv the language must have been activated in the kindly platform before see example below chat options window\ kindlyoptions you can control your kindly chat settings by setting some options through the global window\ kindlyoptions or with the data attributes on the kindly chat \<script> tag property reference 250,111,106,275 left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type chat properties window\ kindlychat kindly chat comes with some useful methods and data properties property reference 266,477 true left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type nudge property reference you also have some properties to handle nudges these are usable independently of the nudge type you want to use them with https //docs kindly ai/api/nudge 330,331left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type examples opening the chat from a button on your webpage add en event listener to your button that calls openchat() chat with us displaying the chat bubble only if the browser is officially supported keep in my mind that kindly chat could still work fine for more browsers than the officially supported ones, so we suggest the approach below only if really necessary send a message in kindly chat on behalf of the user this could be useful, for example, if you have a support form on your website before submitting the customer's inquiry to your backend, you could ask directly in the chat and only if the chat goes to fallback then submit it to your backend or an agent window\ kindlychat sendmessage("hi, do you sell computers as well?", {sender "user"}) chat events you can attach event listeners for the following events emitted by the kindly chat client event reference 100,274,100left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type nudge callbacks these are callbacks used along with nudges docid\ dhqt3vmsp8gu6k2 ckp3p we don't have yet an event emitter api for these events so it's currently working with callbacks that you can set on window\ kindlyoptions 220,220,221left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type examples logging the payload and randomly displaying the chat bubble on kindly\ load document addeventlistener('kindly\ load', (event) => { console log('đđ', event detail); if(math random() >= 0 5) { kindlychat showbubble(); } }); logging and sending to analytics the button data on kindly\ buttonclick window\ addeventlistener('kindly\ buttonclick', (event) => { console log('this is the event payload ', event detail); const buttondata = event detail button; trackgoogleanalytics(buttondata); }); tracking every time the user manually switches language window\ addeventlistener(`kindly\ ui`, (event) => { const { detail } = event; const eventtype = detail type; // in general, for tracking user behaviour, it's good practice to also // check that `source` is `user`, since perhaps you wouldn't want to track // if the action was somehow initiated/performed by the chat itself if (eventtype === 'change language' && detail source === 'user') { const payload = { incrementcount eventtype, targetlanguage detail value languagename } sendtogoogleanalytics(payload) } } â°ī¸ callback reference ( deprecated ) 180,563left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type authentication kindly supports authenticating your users when your users are authenticated, it's easier to identify them in the kindly insights and you can create more personalized and powerful webhook integrations to set this up you need to do a few things add a callback to kindly chat initialization code create a private/public key pair create an authentication endpoint that returns a https //jwt io/ in a specific format after the initial implementation and setup, you are able to see user details in kindly insights identify users in webhooks (via the forwarded jwt) read more about authenticating your users in the full docid\ edoiixeuyfxeny4tqylpf supported versions major versions are released on a six month cycle and there will be no breaking changes outside of a major release we follow semantic versioning when naming versions of kindly chat browser support for kindly chat widget is based on the following logic >0 2% in alt eu we support browsers that have more than 0 2% of the market share in europe (alternative data source) >0 2% in us we support browsers that have more than 0 2% of the market share in the united states last 3 years we support all browsers that have been released in the last 3 years not dead we do not support browsers that are no longer maintained not operamini all we do not support any versions of opera mini not edge < 20 we do not support microsoft edge versions older than version 20 not opera < 63 we do not support opera versions older than version 63 not safari < 13 we do not support safari versions older than version 13
