Home / Single Web Page/Multi-Web Page Chatbot Application with JavaScript

Single Web Page/Multi-Web Page Chatbot Application with JavaScript

1 min , 38 sec read

This implementation method can be used when embedding a chatbot into your website either on a single web site page or across multiple pages.

  1. Once you have an experience built and ready to be deployed to your website, log into the Koopid Admin Portal and navigate to the Manage page under the Services left-side menu.
  2. Locate the name of your experience in the Manage list, and click on the “deploy” icon on the right side of the row in the list to view the deployment options.
  3. The third option listed on the Deploy Your Experience page is JavaScript Code for Web, click on this option and expand the box.                                                                                                             
  4. There are two snippets of code under the JavaScript Code for Web section that are available and need to be posted on the web page where you are adding the chatbot.
  5. First, copy ALL the JavaScript code in the first box including the <script> tags and paste that between the <head> tags on your web page.
  6. Next, copy the HTML snippet BELOW under the HTML Code to Add to Your Webpage header, and paste it in the location on your web page you want the chat button to appear on your web page.
  7. Replace the email address after the data-kpdprovemail and the experience name after the data-kpdtag tag with the email address and experience name that appear in the code snippet in the second box under the JavaScript Code for Web section on the deployment page.Example code from deployment page:<img id="kpd_koopidtag" data-kpdprovemail="myemail@gmail.com" data-kpdguest="true" data-kpdembedded="true" data-kpdtag="myExperienceTag">

    Jump to a section...

    HTML Code to Add to Your Webpage:

    <img data-brackets-id="208" class="klogo" src="https://app.koopid.io/kpd-static/providers/418/images/Koopid-circle-1024.png" style="float: right;width: 55px;background-color: #fff;border: solid 1px #eee;margin: 0px;" id="kpd_koopidtag" data-kpdprovemail="myemail@gmail.com" data-kpdguest="true" data-kpdembedded="true" data-kpdtag="myExperienceTag">
  8. Save your webpage and test your webpage in a browser, click on the icon and test that the chatbot opens when the button is clicked.(*Note: You can replace the image in the code above with the path to an image uploaded to your website, simply replace the src path in the snippet above.)
  9. To add the same chatbot to multiple pages on your website – copy the code added to your web page for steps 5-7 to the additional webpages on your site where you want this same chatbot experience to appear.
  10. If you want DIFFERENT chatbot experiences to appear on different web pages on your site, you need to add the code above to those other pages, and then go to the deployment page for the different chat experiences on your provider and find the code updates needed for step 7 above, and apply those to the different pages where you want the different chatbots to appear. The chatbots deployed run based on the data-kpdprovemail and data-kpdtag tags specified on their deployment pages.