Angular¶
Integrating with Alan AI¶
To integrate an Angular app with Alan AI:
Add the Alan AI Web SDK to your app. You can do it in two ways:
With the npm package
In the browser library mode
To install the Alan Web SDK with the npm package:
To load the Alan AI Web SDK in the browser library mode, add the
alan_lib.min.js
library to theindex.html
file using the<script>
tag:Client app¶<script type="text/javascript" src="https://studio.alan.app/web/lib/alan_lib.min.js"></script>
Add the Alan AI button to your component:
Client app¶export class AppComponent { alanBtnInstance; constructor(){ this.alanBtnInstance = alanBtn({ key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE', host: 'v1.alan.app', onCommand: (commandData) => { if (commandData.command === 'go:back') { // Call the client code that will react to the received command } }, }); } }
Note
Regularly update the @alan-ai/alan-sdk-web
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-sdk-web
. 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:
textChat Properties
Name |
Type |
Description |
---|---|---|
|
number |
Specifies the delay (in milliseconds) for the close animation when the chat is rendered in inline mode. |
|
boolean |
Determines whether the Alan button should be shown when the chat is open in inline mode. |
|
boolean |
Indicates whether the chat should be open or closed by default when rendered in inline mode. |
|
function |
A callback function that is triggered when the chat interface is opened. |
|
function |
A callback function that is triggered when the chat interface is closed. |
|
function |
A callback function that is triggered when the chat interface is minimized. |
Changing the Alan AI button position¶
By default, the Alan AI button is placed in the bottom right corner of the window. To change the Alan AI button position, you can use the following options for the alanBtn
variable:
left
: sets the Alan AI button position from the left edgeright
: sets the Alan AI button position from the right edgetop
: sets the Alan AI button position from the top edgebottom
: sets the Alan AI button position from the bottom edgezIndex
: sets the z-order of the Alan AI button
alanBtn({
key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
bottom: '50px',
left: '50px',
zIndex: 10
});
Using client API methods¶
You can use the following client API methods in your Angular app:
setVisualState()¶
Use the setVisualState()
method to inform the AI Agentic Interface about the app’s visual context. For details, see setVisualState().
export class AppComponent {
alanBtnInstance;
constructor(){
this.alanBtnInstance = alanBtn({
key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
host: 'v1.alan.app',
});
}
public setVisualState() {
this.alanBtnInstance.setVisualState({data: "your data"});
}
}
<div>
<a class="card" (click)="setVisualState()">
<span>Set visual state</span>
</a>
</div>
callProjectApi()¶
Use the callProjectApi()
method to send data from the client app to the dialog script and trigger activities without voice and text commands. For details, see callProjectApi().
projectAPI.setClientData = function(p, param, callback) {
console.log(param);
};
export class AppComponent {
alanBtnInstance;
constructor(){
this.alanBtnInstance = alanBtn({
key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
host: 'v1.alan.app',
});
}
public callProjectApi() {
this.alanBtnInstance.callProjectApi("setClientData", {value:"your data"}, function (error, result){
// handle error and result here
});
}
}
<div>
<a class="card" (click)="callProjectApi()">
<span>Call setClientData method</span>
</a>
</div>
playText()¶
Use the playText()
method to play specific text in the client app. For details, see playText().
export class AppComponent {
alanBtnInstance;
constructor(){
this.alanBtnInstance = alanBtn({
key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
host: 'v1.alan.app',
});
}
public playText() {
this.alanBtnInstance.playText("Hello, I am Alan!");
}
}
<div>
<a class="card" (click)="playText()">
<span>Play text</span>
</a>
</div>
sendText()¶
Use the sendText()
method to send a text message to Alan as the user’s input. For details, see sendText().
export class AppComponent {
alanBtnInstance;
constructor(){
this.alanBtnInstance = alanBtn({
key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
host: 'v1.alan.app',
});
}
public sendText() {
this.alanBtnInstance.sendText("Hello Alan, can you help me?");
}
}
<div>
<a class="card" (click)="sendText()">
<span>Send text</span>
</a>
</div>
playCommand()¶
Use the playCommand()
method to execute a specific command in the client app. For details, see playCommand().
export class AppComponent {
alanBtnInstance;
constructor(){
this.alanBtnInstance = alanBtn({
key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
host: 'v1.alan.app',
onCommand: (commandData: any) => {
if (commandData.command === 'goBack') {
// Call client code that will react to the received command
}
},
});
}
public playCommand() {
this.alanBtnInstance.playCommand({command: "goBack"});
}
}
<div>
<a class="card" (click)="playCommand()">
<span>Play command</span>
</a>
</div>
activate()¶
Use the activate()
method to activate the Alan AI button programmatically. For details, see activate().
export class AppComponent {
alanBtnInstance;
constructor(){
this.alanBtnInstance = alanBtn({
key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
host: 'v1.alan.app',
});
}
public activateButton() {
this.alanBtnInstance.activate();
}
}
<div>
<a class="card" (click)="activateButton()">
<span>Activate Alan AI button</span>
</a>
</div>
deactivate()¶
Use the deactivate()
method to deactivate the Alan AI button programmatically. For details, see deactivate().
export class AppComponent {
alanBtnInstance;
constructor(){
this.alanBtnInstance = alanBtn({
key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
host: 'v1.alan.app',
});
}
public deactivateButton() {
this.alanBtnInstance.deactivate();
}
}
<div>
<a class="card" (click)="deactivateButton()">
<span>Deactivate Alan AI button</span>
</a>
</div>
isActive()¶
Use the isActive()
method to check the Alan AI button state: active or not. For details, see isActive().
export class AppComponent {
alanBtnInstance;
constructor(){
this.alanBtnInstance = alanBtn({
key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
host: 'v1.alan.app',
});
}
public isActive() {
console.log("The button is active: " + this.alanBtnInstance.isActive());
}
}
<div>
<a class="card" (click)="isActive()">
<span>Check button state</span>
</a>
</div>
remove()¶
Use the remove()
method to remove the Alan AI button from the parent element. For details, see remove().
export class AppComponent {
alanBtnInstance;
constructor(){
this.alanBtnInstance = alanBtn({
key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
host: 'v1.alan.app',
});
}
public removeButton() {
this.alanBtnInstance.remove();
}
}
<div>
<a class="card" (click)="removeButton()">
<span>Remove Alan AI button</span>
</a>
</div>
textChat.isAudioOutputEnabled()¶
Use the textChat.isAudioOutputEnabled()
method to get the state of audio output for the Alan AI Chat. For details, see textChat.isAudioOutputEnabled().
alanBtnInstance.textChat.isAudioOutputEnabled()
textChat.setAudioOutputEnabled()¶
Use the textChat.setAudioOutputEnabled()
method to enable or disable audio output for the Alan AI Chat. For details, see textChat.setAudioOutputEnabled().
alanBtnInstance.textChat.setAudioOutputEnabled(true)
textChat.setFullScreenMode()¶
Use the textChat.setFullScreenMode()
method allows switching the Alan AI Chat interface between full-screen and normal view. For details, see textChat.setFullScreenMode().
alanBtnInstance.textChat.setFullScreenMode(true);
textChat.open()¶
Use the textChat.open()
method to open the Alan AI Chat interface. For details, see textChat.open().
alanBtnInstance.textChat.open(); // Opens the Alan AI Chat interface
textChat.close()¶
Use the textChat.close()
method to close the Alan AI Chat interface. For details, see textChat.close().
alanBtnInstance.textChat.close(); // Closes the Alan AI Chat interface
textChat.minimize()¶
Use the textChat.minimize()
method to minimize the Alan AI Chat interface. For details, see textChat.minimize().
alanBtnInstance.textChat.minimize(); // Minimizes the Alan AI Chat interface
textChat.clear()¶
Use the textChat.clear()
method to clear the Alan AI Chat interface. For details, see textChat.clear().
alanBtnInstance.textChat.clear(); // Clears the chat history in the Alan AI Chat interface
theme.setTheme(theme)¶
Use the theme.setTheme(theme)
method to set the Alan AI Chat interface theme to either light
and dark
. For details, see theme.setTheme(theme).
alanBtnInstance.theme.setTheme('light');
theme.getTheme()¶
Use the theme.getTheme()
method to retrieve the current theme of the Alan AI Chat interface. For details, see theme.getTheme().
alanBtnInstance.theme.getTheme(); // returns 'light' or 'dark'
Using handlers¶
You can use the following Alan AI handlers in your Angular app:
onCommand handler¶
Use the onCommand
handler to handle commands sent from the dialog script. For details, see onCommand handler.
this.alanBtnInstance = alanBtn({
key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
host: 'v1.alan.app',
onCommand: (commandData: any) => {
if (commandData.command === 'go:back') {
// Call client code that will react to the received command
}
},
});
onButtonState handler¶
Use the onButtonState
handler to capture and handle the Alan AI button state changes. For details, see onButtonState handler.
this.alanBtnInstance = alanBtn({
key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
host: 'v1.alan.app',
onButtonState: function (e) {
console.info('onButtonState', e);
},
});
onConnectionStatus handler¶
Use the onConnectionStatus
handler to capture and handle the connection status for the AI Agentic Interface project. For details, see onConnectionStatus handler.
this.alanBtnInstance = alanBtn({
key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
host: 'v1.alan.app',
onConnectionStatus: function(status) {
console.log("The status is " + status);
},
});
onEvent handler¶
Use the onEvent
handler to capture and handle events emitted by Alan AI: get user’s utterances, AI Agentic Interface responses and so on. For details, see onEvent handler.
this.alanBtnInstance = alanBtn({
key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
host: 'v1.alan.app',
onEvent: function (e) {
console.info('onEvent', e);
},
});