Use Ana Web Chat Plugin to deploy your Ana chat bot onto your website.
- Brand it as your website.
- Mobile friendly out of the box.
- A small code snippet to integrate it on any page.
Step 1:
Setup Ana Conversation Studio and Ana Chat Server to design and publish an Ana chat bot.
- Assuming you have done that have an Ana Chat Server URL, let's call it
ana-chat-server.com
Step 2:
Download ana-web-chat-plugin.zip
from releases, extract and host it on any normal http server. Note the server URL. Let's call it web-plugin.ana-chat-server.com
- If you want to host this at a path like
/web-plugin/
instead of the root of your server, you will also need to update<base href="/">
insidehead
ofindex.html
to<base href="/web-plugin/">
. If you do it, Ana web chat plug-in server URL will now beana-chat-server.com/web-plugin/
Step 3:
Using Ana Conversation Studio, design a chat bot, publish it and note down the chat project id. Let's call it chat-bot-1
- Click here if you have not setup Ana Conversation Studio and created your chat bot yet!
Step 4:
You need few more things listed below
- The color hex code you want your chat window to be in. For Ana it's
#8cc83c
- Logo URL for the chat bot. For Ana it's
http://ana.chat/favicon.ico
- Your chat bot name and a small description.
- If your chat bot asks for locations to the users, you will need a google api key with google static maps and google maps javaScript SDK enabled. Head over to Google API Console to get one.
Step 5:
Replace all the placeholders in the below code with the onces noted above, copy and paste it in your website's html file just above the </body> (body's closing tag)
<script type="text/javascript" id="ana-web-chat-script"
src="http://<web-plugin.ana-chat-server.com>/assets/embed/ana-web-chat-plugin.js"
ana-endpoint="http://<ana-chat-server.com>:8088/wscustomers/chatcustomers-websocket"
ana-businessid="chat-bot-1"
ana-primary-bg="#8cc83c"
ana-flowid="chat-project-id-1"
ana-logo-url="<Your chat bot logo url>"
ana-agent-name="<Chat bot name>"
ana-agent-desc="<A small description>"
ana-iframe-src="http://<web-plugin.ana-chat-server.com>/"
ana-api-endpoint="http://<ana-chat-server.com>:8080/"
ana-gmaps-key="<Your Google Maps API Key>"
ana-primary-fg="white"
ana-secondary-bg="black"
ana-frame-height="70vh"
ana-frame-width="360px"
ana-fullpage="true"
></script>
Advanced options
No of seconds to wait and open the chat window automatically:
ana-auto-open="30"
Show or hide chat reset button:
ana-allow-chat-reset="true" or "false"
Enable HTML formatting in messages:
ana-html-messages="true" or "false"
Load only current chat session in history:
ana-current-session-only="false" or "true"
Show or hide 'Powered by Ana':
ana-show-branding="true" or "false"
Enable chat message sounds:
ana-msg-sounds="false" or "true"
Manual Initialization
By default, the script will be initialized automatically. If you want to pass your own userId and any variables during the initialization, you need to add ana-manual-init="true"
to the script tag and add the below snippet with the information you need.
<script>
Ana(<user-id>, {
"<variable1>":"<value1>",
"<variable2>":"<value2>"
});
</script>
Ana Web Chat Plugin is available under the GNU GPLv3 license.