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.