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.
<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
statementOr 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 |
---|---|---|
|
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.