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

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()