Connect Amio Chat

This tutorial guides you through the creation of Amio Chat channel and the basic setup of Amio Web Chat.

1. Create Channel

Log in to app.amio.io.
In administration, go to channels.
Click on Add New Channel select Amio Chat.
Fill in the name of the channel.
Click Connect.

2. Allow Amio Web Chat to connect to the Channel

In the details page of your Channel, go to Settings tab.
Click Edit.
Click Add Domain and add this domain to the list: https://chat-widget.static-amio.com:443
Click Save.

When setup correctly, your Settings tab will look like this:

3. Embed Amio Web Chat to your webpage directly

To embed Amio Web Chat to your webpage, just include a script (see code below) and call the init() function.

<html>
  <head>
    <script src="https://chat-widget.static-amio.com/static/amio-webchat-loader.min.js" type="text/javascript"></script>
  </head>
  <body>
    <script type="text/javascript">
        window.amioWebchat.init({
          channelId: '{CHANNEL_ID}'
          //see other parameters below
        });
    </script>
  </body>
</html>

<template>
  <!-- component template -->
</template>

<script>
// using scriptjs library to load the script
import $script from 'scriptjs'

export default {
  mounted () {
    new Promise(resolve => {
      $script('https://chat-widget.amio.io/static/amio-webchat-loader.min.js', resolve)
    }).then(() => {
      window.amioWebchat.init({
        channelId: '{CHANNEL_ID}'
        //see other parameters below
      })
    })
  }
}

</script>

📘
Don't forget to replace {CHANNEL_ID} with the ID of your Amio Chat channel.

Check all available customization at window.amioWebchat.init()

4. Embed Amio Web Chat to your webpage with GTM

Go to your Google Tag Manager container and create a new tag.
Click on "Discover more tag types in the Community Template Gallery" and search for Amio.

And add it to your workspace.
Now you are prompted to input additional parameters - these should be given to you by your account manager.

Channel ID - ID of channel in Amio
Logo URL - link to a logo displayed in the header of the chat
Theme - the visual design of your chat
Storage Type - Local or Session - if you want to hold the history of chat across multiple sessions, use Local. The Session deletes the history each time you visit the website.
Wide widget - determines whether small or big launcher is used.

You can also include other parameters using the table at the end.

Add a trigger - All Pages
Test and submit! You are all done.