nowfloats / anachat-web

Deploy ANA chat bot onto your web site using this ANA Web Chat Plugin.

Ana Web Chat Plugin

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.

Integration

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="/"> inside head of index.html to <base href="/web-plugin/">. If you do it, Ana web chat plug-in server URL will now be ana-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>

License

Ana Web Chat Plugin is available under the GNU GPLv3 license.

anachat-web's Issues

Error in mozilla Firefox : Unhandled Promise rejection

Hi,

I'm usign the wordpress plugin for ana-chatbot which work really nice with chrome. When I'm trying to access to my website with firefox, I can't access to the chatbot due to :
Unhandled Promise rejection: getComputedStyle(...) is null ; Zone: <root> ; Task: Promise.then ; Value: TypeError: "getComputedStyle(...) is null"

Any ideas ?

Regards,
Shankiflang

API Call on Web Chat

Dear All,
I am unable to call webservice (apicall) with the values entered by user..

I configured APICall as per attached images.. The configured APIcall is invoking but assigned variable values are empty.. Please help me on this and i need how to show response as well on chatbot..

Button:OpenUrl - Reloading node itself

Dear All,

I have created a node with button type as OpenUrl which will invoke www.google.com. On clicking this URL, google website opening in browser but that particular node reloading itself..

Is it normal behavior? If so how we can override?

IE loading issue

Hi All,
I have tried ANA web chat on IE 10 & 11.. Both these browsers won't support ECMAScript 6.. So i used bebel js but still no luck..
Is there any way to achieve this on IE browsers?