Web Widget Setup - Kiosk Scheduler & Text Widgets

Web Widget Setup - Kiosk Scheduler & Text Widgets

If you do not currently have Kiosk added as part of your shop package, please contact our sales team to assist in adding the Kiosk and Widget functions.
  1. (469) 202-4090
  2. information@autoflow.com

All processes detailed below can also be found on the Integration Setup page using an admin login, located as seen in the screenshot below.


Web Widget Setup

jQuery is a required dependency and must be included in your website before you include the widget script. More detail regarding jQuery can be found at their learning center
here.

  1.  Header Script - Include this script in the html <head> of your webpage with "YOURTOKENHERE" being replaced with your atme API header generated below. (Details on finding API Header later in this article.)
    <script data-name='atme-auth' data-token='YOURTOKENHERE' src="https://atme-cdn.s3-us-west-2.amazonaws.com/widget/widget.js" type="text/javascript"></script>
  2. Chat Widget Wrapper - Include this div anywhere in the body of your webpage, do NOT put any elements within this div. (If you do not wish to use the chat feature this code can simply be left out of the website.)
    <div id="atme-widget"></div>
  3. Create Scheduler Trigger - We allow you to set your own element as the trigger to pop up the kiosk modal, include the specified href in the example. This will allow you to configure a customizable button to open the Kiosk scheduler in the current window, instead of directing the customer to a new browser tab/page.
    <a class="btn" href="#atme-scheduler">Scheduler button</a>

Locating Your API Header

Below the Web Widget information  on the Integration Setup Page you will find your shop's unique API credentials. The YOURTOKENHERE segment listed above will need to be replaced by your unique shop's API Header, which can be found as seen in the screenshot below.



The clipboard icon can be clicked to automatically copy the Header information on your computer, and be used to replace the YOURTOKENHERE segment in the example code for the web widget.


Whitelist

You will notice there is a segment on the Integration Setup page for a Widget White-List, this is an approved list of websites that the widget can be implemented. If there are any websites beyond the shop's primary website provided during autoflow shop instance creation, please provide this to support with a request to add the listed web URLs to your shop's Widget White-List.