If you want to start fast, follow these steps:

  1. Embed the Script
  2. Initialize the SDK
  3. Customize the SDK
  4. Authenticate Users

In addition, see an example of a Full Snippet.

​
1. Embed the Script

  1. Embed the script directly inline. See the instructions below.
  2. Use a tag manager to control where and how the scripts load. The ASAPP Chat SDK works with most tag managers. See the tag manager documentation for more detailed instructions.

To enable the ASAPP Chat SDK, you’ll first need to paste the ASAPP Chat SDK Web snippet into your site’s HTML. You can place it anywhere in your markup, but it’s ideal to place it near the top of the <head> element.

<script> 
(function(w,d,h,n,s){s=d.createElement('script');w[n]=w[n]||function(){(w[n]._=w[n]._||[]).push(arguments)},w[n].Host=h,s.async=1,s.src=h+'/chat-sdk.js',s.type='text/javascript',d.body.appendChild(s)}(window,document,'https://sdk.asapp.com','ASAPP')); 
</script>

This snippet does two things:

  1. Creates a <script> element that asynchronously downloads the https://sdk.asapp.com/chat-sdk.js JavaScript.
  2. Creates a global ASAPP function that enables you to interact with ASAPP’s JavaScript API.

If you’re curious, feel free to view the Full Snippet.

​
2. Initialize the SDK

After you Embed the Script into the page, you can start using the JavaScript API to initialize and display the application.

To initialize the ASAPP Chat SDK, call the ASAPP('load') method as seen below:

     <script> ASAPP('load', { 
     APIHostname: 'API_HOSTNAME', 
     AppId: 'APP_ID' 
}); 
</script>

Note: The APIHostname and AppId values will be provided to you by ASAPP after coordination between your organization and your ASAPP Implementation Manager. Once these values have been determined and provided, you can make the following updates:

  1. Replace API_HOSTNAME with the hostname of your ASAPP API location. This string will look something like

    'examplecompanyapi.asapp.com'.

  2. Replace APP_ID with your Company Marker identifier. This string will look something like 'examplecompany'.

Calling ASAPP('load') will make a network request to your APIHostname and determine whether or not it should display the Chat SDK Badge. The Badge will display based on your company’s business hours, your trigger settings, and whether or not you have enabled the SDK in your Admin control panel.

For more advanced ways to display the ASAPP Chat SDK, see the JavaScript API Documentation.

​
3. Customize the SDK

After you Embed the Script and Initialize the SDK, the ASAPP Chat SDK should display and function on your web page. You may wish to head to the Customization section of the documentation to learn how to customize the appearance of the ASAPP Chat SDK.

​
4. Authenticate Users

Some integrations of the ASAPP Chat SDK allow users to access sensitive account information. If any of your use cases fall under this category, please read the Authentication section to ensure your users experience a secure and seamless session.

​
Full Snippet

For additional legibility, here’s the full Chat SDK Web integration snippet:

(function(win, doc, hostname, namespace, script) {
    script = doc.createElement('script');
    win[namespace] = win[namespace] || function() {
        (win[namespace]._ = win[namespace]._ || []).push(arguments)
    }
    win[namespace].Host = hostname;
    script.async = 1;
    script.src = hostname + '/chat-sdk.js';
    script.type = 'text/javascript';
    doc.body.appendChild(script);
})(window, document, 'https://sdk.asapp.com', 'ASAPP');

Was this page helpful?

OverviewWeb Authentication