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

1. In the Terminal, run the command:

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

2. Add a <div> for appending the Alan button:

   <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:

   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

1. Add the <script> tag to the page:

   <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:

   <div class="alan-btn"></div>
   

3. Add the Alan button in the <script> tag like this:

   <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 Alan button parameters.

What’s next?

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