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:

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