Alan Web Component

The Alan button can be added to your app as a Web Component. Using the Alan Button Web Component is as simple as importing it: you can add it to your app just by adding it as a normal HTML tag.

<alan-button alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE"></alan-button>


It is recommended that you use the Alan Button Web Component with cross-platform frameworks (Ionic). To integrate Alan voice into a non cross-platform app or page, use Alan Web SDK.

Web Component API

To add the Alan button to a page as a Web Component:

  1. Add the source code of the Alan Button Web Component to your page/project. Install the @alan-button package from npm:

    npm i @alan-ai/alan-button

    Once the package is installed:

    • Use it in your project with the import statement

    • Or add the following script tag to your HTML page:

    <script src="(path_to_node_modules)/@alan-button/dist/alancomponents.js"></script>
  2. Add the following tag to the HTML page, view or template:

    <alan-button id="myAlanBtn" alan-key="0717498b05e694d0b083b897e50a49102e956eca572e1d8b807a3e2338fdd0dc/stage"></alan-button>

Web Component parameters






The Alan Studio project key.

Alan button methods

For details on methods exposed for the Web Component, see Client API methods.



Received when command is received from the AT script.

var myAlanBtn = document.getElementById('myAlanBtn');

myAlanBtn.addEventListener('command', function (data) {'Received command:', data.detail);


Received when a new connection status for the Alan button is obtained.

var myAlanBtn = document.getElementById('myAlanBtn');

myAlanBtn.addEventListener('connectionStatus', function (data) {'Received status:', data.detail);