Cross-platform solutions

The Alan AI agentic interface 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 agentic interface 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 agentic interface parameters

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

Name	Type	Description
alan-key	string	The Alan AI Studio project key.

Using the Alan AI agentic interface 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 agentic interface is obtained.

Client app

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

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