This implementation method can be used when embedding a chatbot into your website either on a single web site page or across multiple pages.
- 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.
- 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.
- 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.
- Replace the email address after the
data-kpdprovemailand the experience name after the
<img id="kpd_koopidtag" data-kpdprovemail="firstname.lastname@example.org" data-kpdguest="true" data-kpdembedded="true" data-kpdtag="myExperienceTag">
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="
email@example.com" data-kpdguest="true" data-kpdembedded="true" data-kpdtag="
- 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.)
- 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.
- 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-kpdtagtags specified on their deployment pages.