JavaScript SDK Integration (V2)

Updated on May 10, 2024

Linking #

Alli JavaScript integration is easy and simple. Just copy and paste the code below into your website.

<html>
  <body>
    <!-- ...Your website content... -->
    <script type="module">
      import Alli from 'https://sdk.alli.ai/2/alli.esm.min.js';
      const main = async () => {
        // YOUR_SDK_KEY enters the SDK key written in Alli Dashboard > Project Settings.
        await Alli.initialize({ sdkKey: 'YOUR_SDK_KEY' });
        // ...
      };
      main();
    </script>
  </body>

Start a conversation #

Start the conversation as shown below. You can choose one of the two options below.

Option: If you want to specify USER ID or Placement information, enter it as follows.

<html>
  <body>
    <!-- ...Your website content... -->
    <script type="module">
      import Alli from 'https://sdk.alli.ai/2/alli.esm.min.js';
      const main = async() =>{  
        await Alli.initialize({ sdkKey: 'YOUR SDK KEY' });
        
        Alli.setPlacement('YOUR_PLACEMENT')
        Alli. setUser ( {
          id: 'YOUR_USER_ID',
          variables: { EMAIL: 'user@example.com' },
        });
        // ...
      };
      main();
    </script>
  </body>
</html>

User specific #

For users who are not identified by USER ID, Alli uses cookies to store information. In other words, if you delete cookie history or connect using another device, you will not be able to identify the user.

If you log in to the website and are a specific user, you can forward information to Alli. Alternatively, you can create temporary IDs for users who are not logged in.

For example, if USER ID is USER-123, enter as follows.

<html>
  <body>
    <!-- ...Your website content... -->
    <script type="module">
      import Alli from 'https://sdk.alli.ai/2/alli.esm.min.js';
      const main = async() =>{  
        await Alli.initialize({ sdkKey: 'YOUR SDK KEY'}); 
        
        const currentUser = Alli.user;
        Alli. setUserId ( 'USER-123' ) ;
        // ...
      };
      main();
    </script>
  </body>
</html>

*To assign other user information such as email or address, please refer to ‘Specifying Variable Values’ below.

Specifying variable values #

If you want to assign a specific variable value to a variable when starting a conversation, use the format below.

This function allows you to store specific user information in Alli variables. The variable must already exist in the Alli dashboard. You can check the variable list in Dashboard Settings > Variables > System.

Below is an example of assigning email information to a specific user.

<html>
  <body>
    <!-- ...Your website content... -->
    <script type="module">
      import Alli from 'https://sdk.alli.ai/2/alli.esm.min.js';
      const main = async() =>{  
        await Alli.initialize({ sdkKey: 'YOUR_SDK_KEY'}); 
        const currentUser = Alli.user;
        Alli. setUser ( {
          id: 'USER-123',
          variables: { EMAIL: 'user@example.com'}, 
        });
        // ...
      };
      main();
    </script>
  </body>
</html>

Placements #

Placement is one of the most important and characteristic parts of Alli SDK. Placement information is used to determine which skills to load on that page or app.

Fixed Placements #

Once you create a Placement, you can assign it to the skill you want in the Alli dashboard, and this way you can load the skill you want when and where you want.

Below is an example of calling Placement as shopping.

<html>
  <body>
    <!-- ...Your website content... -->
    <script type="module">
      import Alli from 'https://sdk.alli.ai/2/alli.esm.min.js';
      const main = async () => {
        await Alli.initialize({ sdkKey: 'YOUR_SDK_KEY' });
        
        const currentPlacement = Alli.placement;
        
        Alli.setPlacement('shopping');
        // ...
      };
      main();
    </script>
  </body>
</html>

Dynamic Placements #

Alli SDK automatically exports URL information and can be used to set dynamic placement. To do this, simply omit the Placement information call and set it in the dashboard as shown below. For example, if you want to load a skill from a URL containing \”/download\”, set the skill’s Placement setting to \”contains download\” as shown below. Please remember that dynamic placement cannot be used in SPA (Single Page App).

Supported browsers #

     

      • Chrome (version 67 or higher)

      • FireFox (version 69 or higher)

      • Opera (version 54 or higher)

      • Safari (version 11.1 or later)

      • Microsoft Edge (version 80 or higher)

    Upgrade from Alli SDK V1 to V2 #

    Alli SDK v1 supported Universal Module Definition (UMD), but Alli SDK v2 supports ECMAScript Module (ESM). By supporting the latest standard specifications such as ESM, Alli benefits from a variety of benefits. If you are using a modern browser, ESM is supported in most browser environments, so there is no need to consider it separately. In addition, by supporting ESM, there is no need to put Alli variables in Global scope (window) variables. If this variable needs to be used as a global scope, the customer must directly substitute the global scope.

    <script type="module">
  import Alli from 'https://sdk.alli.ai/2/alli.esm.min.js';
  window. Alli = Alli;
</script>

    Loading Alli in full screen without toggle icons and previews #

    In cases such as loading Alli on a small screen such as a mobile browser, there are times when you need to skip the toggle icon and preview and immediately load the chat UI in full screen. You can use it as below.

    In the opposite case, change true to false.

    Alli.initialize({
  sdkKey: 'YOUR_SDK_KEY',
  fullscreen: true,
  launcher: {
    hidden: true,
  },
});
    Alli.show();
    };

    Adjusting the position of toggle icons, speech bubbles, and chat windows #

    Depending on the usage environment, you may need to adjust the positions of the toggle icons, speech bubbles, and chat windows. In this case, you can adjust it through CSS and position it where you want by editing the class below.

    Toggle icon position adjustment: 'alli-launcher-container'

Adjust speech bubble position: 'alli-message-preview-container'

Adjust chat window position: 'alli-messenger-container'

    Polyfil #

    If you are using an older browser, it may not support ESM. Depending on the browser, Polyfill may be required.

    The polyfill below is included in Alli SDK v2.

       

        • Array.prototype.at

        • Promise.allSettled

        • globalThis

        • queueMicrotask

        • Symbol.prototype.description

      Depending on the browser you use, the polyfill below may be required.

         

          • Intl.Locale

          • Intl.PluralRules

          • Intl.NumberFormat

          • Intl.RelativeTimeFormat

          • AbortController

          • ResizeObserver

        Table of contents