How to install AutoChat on a website

Updated on 25 Aug 2023
1 Minute to read
Contributors

Print
Share
Dark
Light

Article summary

Did you find this summary helpful?

Thank you for your feedback

You can install AutoChat in 2 ways:

Installing by adding code to the website’s source code

To install AutoChat in it’s most basic form, that means just the chat bubble, no CTA buttons and no vehicle identification you need to add 2 things:

Place this HTML below the opening <body> tag:

<div id="autochat-root"></div>
<div id="autochat-chat-overlay"></div>

and place this Javascript above the closing </body> tag.

<script>
    (function(){
        var autochatConfig = {
            assistantId: "INSERT ASSISTANTID",
            accessToken: "INSERT ACCESSTOKEN",          
            locale: "NL", // or EN/FR
        };
        var s=document.createElement("script");s.src="https://static.chatclient.autochat.ai/release/autochat.js?ver=1",s.async=!0,s.defer=!0,s.addEventListener("load",function(){autochat.init(autochatConfig)}),document.body.appendChild(s);
    })()
</script>

Don’t forget to enter in the assistantId and accessToken

Installing via Google Tag Manager

If you are using GTM on your website you can also install AutoChat in that way.

Step 1: log into Tag Manager and open tags

Step 2: click new

Step 3: click on tag configuration

Step 4: choose custom HTML

Step 5: enter in this code

<div id="autochat-root"></div>
<div id="autochat-chat-overlay"></div>
<script>
    (function(){
        var autochatConfig = {
            assistantId: "INSERT ASSISTANTID",
            accessToken: "INSERT ACCESSTOKEN",          
            locale: "NL", // or EN/FR
        };
        var s=document.createElement("script");s.src="https://static.chatclient.autochat.ai/release/autochat.js?ver=1",s.async=!0,s.defer=!0,s.addEventListener("load",function(){autochat.init(autochatConfig)}),document.body.appendChild(s);
    })()
</script>