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

NPM package

In the Terminal, run the command:

Terminal¶

npm install @alan-ai/alan-sdk-web --save

Add a <div> for appending the Alan button:
Client app¶
```
<div class="alan-btn"></div>
```

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"),
});

Browser library mode

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>

Add a <div> for appending the Alan button:
Client app¶
```
<div class="alan-btn"></div>
```

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.