Documentation

Powered by Algolia

JavaScript


Available on Web platform.

You can integrate the Alan button into a simple HTML page with JavaScript without any frameworks.

Integration

As a script

  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.

As an NPM package

  1. Install @alan-ai/alan-sdk-web using npm.

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

    <div class="alan-btn"></div>
  3. Import 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"),
    });

    For details, see Alan button parameters.