Website

12 min

1 introduction 1 introduction according to oracle, 50% of customers want a business or service provider to stay accessible 24/7 placing a chatbot on your website improves user experience by providing all time support information engati has made it extremely easy for you to deploy a chatbot on the website 1 1 availability you can access web deployment by clicking on the ‘edit settings’ button under configure>deployment>website chatbot 2 deploy 2 deploy there are two ways of using the chatbot 2 1 direct link the direct link would open in a new tab when you click on the ‘test path’ button for the ‘welcome new user path’ in the builder section 2 2 website, chatbot widget on a webpage in this mode, you include a simple javascript within your webpage html you can copy the script to be included from the script within the website chatbot section see below for reference the script in the website code click on the folder icon to copy the script \<html> \<head> 	\<title> 	 my website 	\</title> \</head> \<body> 	\<b>body my website\</b> \</body> \<script>!function(e,t,a){var c=e head||e getelementsbytagname("head")\[0],n=e createelement("script");n async=!0,n defer=!0, n type="text/javascript",n src=t+"/static/js/widget js?config="+json stringify(a),c appendchild(n)}(document,"https //agents engati ai",{bot key "a159eb86cbec4e23",welcome msg\ true,"user attributes" \[{"name" "fruitname","value" "apple"},{"name" "carname","value" "ford"},branding key "default",server "https //agents engati ai",e "p" });\</script> \</html> 2 3 chat position choose the position of the widget on the website bottom left bottom right 2 4 restrict domain select this if you want the web widget to only load when hosted on the specified domains 3 deploying the chatbot on other website hosting sites 3 deploying the chatbot on other website hosting sites 3 1 wordpress website log into your wordpress account, and open the “website creation” section click on the plugin present on the left hand side search for “header and footer scripts” and install it copy the script of your bot from your engati account, the script will be available in the deploy > website chatbot section add the header and footer to your plugin, paste this script into the header section and save the file note your wordpress account must be on a business plan for this feature 3 2 magento 2 website for adding custom scripts – https //magefan com/blog/how to add custom code in html head navigate to admin panel > content > configuration choose the https //magefan com/blog/how to create a new store view in magento 2 you want the head tag to be changed on or select global in order to change it on every store view find the html head section and add your code in the scripts and style sheets field save on click configurations 3 3 wix website please follow the below steps to add the engati script log in to your wix account select edit site click on add apps search for html and choose « html iframe/embed » from the wix app market add it to your site a window pops up double click on the window or select the enter code option select the code option copy the script from the engati deploy, website chatbot section and paste the script here alternatively, use the below steps for the new version of the wix websites log in to your wix account select edit site click on ‘add’ from the panel navigate to ‘embed’ and select ‘custom embeds’ click on ‘+’ add to site icon, next to ‘embed a widget’ a window pops up double click on the window or select the enter code option select the code option copy the script from the engati deploy, website chatbot section and paste the script here 3 4 cargo sites website each cargo site contains a custom html editor where you can add html and javascript access is via the design tab copy and paste the bot script with \<script> and \</script> at the beginning and end of the website note the script will be applied to all the pages of your website if you want the bot script to work only on particular pages then you can add html for a specific page only, and open the code view window via the formatting toolbar of that page 3 5 shopify website go to your shopify admin site here you have to click on “customize theme” click on “customize” upon opening the “themes” section, you will be able to see the “customize” button on the right side of the screen, click on it click on edit code click on the “{/} theme liquid” here you have to go to the “layout” folder and click on it to display a liquid files list, now click on “{/} theme liquid”, this will automatically generate a code file on the right side of the screen find \</body> section here you can add your javascript code, just above the “\</body>” section, in this example, i added the following in order to show you how it works refresh the screen and your chatbot should reflect on your website