JavaScript


You can integrate a simple HTML page with Alan using JavaScript without any frameworks.

Integrating with Alan

You can add the Alan button to your page in two ways:

  • With the npm package

  • In the browser library mode

  1. In the Terminal, run the command:

    Terminal
    npm install @alan-ai/alan-sdk-web --save
    
  2. Add a <div> for appending the Alan button:

    Client app
    <div class="alan-btn"></div>
    
  3. Import the alanBtn function from the @alan-ai/alan-sdk-web package and add the Alan button to the page:

    Client app
    import alanBtn from "@alan-ai/alan-sdk-web";
    
    var alanBtnInstance = alanBtn({
      key: "YOUR_KEY_FROM_ALAN_STUDIO_HERE",
      onCommand: function (commandData) {
        if (commandData.command === "go:back") {
          // Call the client code that will react to the received command
        }
      },
      rootEl: document.getElementById("alan-btn"),
    });
    
  1. Add the <script> tag to the page:

    Client app
    <script type="text/javascript" src="https://studio.alan.app/web/lib/alan_lib.min.js"></script>
    
  2. Add a <div> for appending the Alan button:

    Client app
    <div class="alan-btn"></div>
    
  3. Add the Alan button in the <script> tag like this:

    Client app
    <script>
      var alanBtnInstance = alanBtn({
        key: "YOUR_KEY_FROM_ALAN_STUDIO_HERE",
        onCommand: function (commandData) {
          if (commandData.command === "go:back") {
            // Call the client code that will react to the received command
          }
        },
        rootEl: document.getElementById("alan-btn"),
      });
    </script>
    

For details, see Specifying the Alan button parameters.

Note

Mind the following:

  • Regularly update the @alan-ai/alan-sdk-web package your project depends on. To check if a newer version is available, run npm outdated. To update the alan package, run npm update @alan-ai/alan-sdk-web. For more details, see npm documentation.

  • If you add the Alan button to a multi-page app or website, the Alan button will be reloaded on every redirect or page refresh. To store and access the data required for the dialog session, use the localStorage and sessionStorage objects. Alternatively, you can design your project as a single-page app.

What’s next?

Go to Script concepts to learn about Alan concepts and functionality you can use to create a voice script.