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:

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>
```

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);
});