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.

    • Related Articles

    • Setting up Kiosk

      To Access KIOSK Setup, login as the admin. On the setup page you will find your links which can be embedded on your website or used to open the Kiosks on other devices. 1.  Questionnaire This is where you can gather information beyond regular contact ...

    • Using the Kiosk feature

      Kiosk can be used by the client to check-in their vehicle or schedule appointments. Alternatively, the Kiosk can be a handheld check-in device held by counter staff, ensuring all details are entered and nothing is missed. Checkin Kiosk – Step 1 Phone ...

    • How to use Gravity Payments

      An incredible feature we have is the ability to accept payments over text. Here is a brief introduction on how this feature is used. 1. First, to send the invoice to the customer to be paid, on the ATMe dashboard under the specific customer to be ...

    • How to create predefined outbound text messages

      Add your predefined out bound texts for common conversation points, or answers to frequent inquiries Navigate to the message setup menu through the Workflow setup Simply click + Add Text, and compose your message The final results will be available ...

    • Workflow Setup - Protractor

      To first access this page you will need to be logged into autoflow using an admin role profile. (These setup options will not be available to Service Writer or Technician profiles) From the top right drop down menu you would select the Workflow Setup ...