Cross-platform solutions


The Alan AI button can be added to your app as a Web Component. Using the Alan AI 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 AI Web Component with cross-platform frameworks (Ionic). To integrate a conversational experience into a non cross-platform app or page, use Alan Web SDK.

Integrating with Alan AI

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

  1. Add the source code of the Alan AI 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 AI button parameters

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

Name

Type

Description

alan-key

string

The Alan AI Studio project key.

Using the Alan AI 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 dialog 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 AI button is obtained.

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

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