Cross-platform solutions


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.

Client app
<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.

Integrating with Alan

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:

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

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

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

Note

Regularly update the @alan-ai/alan-button package your project depends on. To check if a newer version is available, run npm outdated. To update the alan package, run npm update @alan-ai/alan-button. For more details, see npm documentation.

Specifying the Alan button parameters

You can specify the following parameters for the Alan button added to your app:

Name

Type

Description

alan-key

string

The Alan Studio project key.

Using the Alan button methods

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

Handling events

command

Received when command is received from the voice script.

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

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

сonnectionStatus

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

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

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