Ionic Angular

Available on: Web platform Android iOS

To integrate an Ionic Angular app with Alan, you need to do the following:

  1. Create an Ionic Angular app

  2. Install Alan packages

  3. Add the Alan button

Step 1. Create an Ionic Angular app

If you want to create a voice-enabled app from scratch, in the Terminal, run the following commands. Otherwise move on to step 2.

npm install -g ionic
cd <appFolder>
ionic start <appName> <template> [options]

For details, see Ionic documentation.

Step 2. Install Alan packages

You need to install the Alan SDK Cordova component and Alan Web Component package.

  1. Navigate to the folder where your app resides:

    cd appName
  2. Install the Alan SDK Cordova component:

    npm install @alan-ai/cordova-plugin-alan-voice --save
  3. Install the Alan Web Component package:

    npm install @alan-ai/alan-button --save


To be able to run Ionic apps on mobile devices, you must install the Alan button as the Web Component using the following packages: @alan-ai/alan-button and @alan-ai/cordova-plugin-alan-voice. Do not use the @alan-ai/alan-sdk-web package: it is intended for non cross-platform web apps and pages.

Step 3. Add the Alan button

To add the Alan button to your app:

  1. Enable usage of custom HTML tags with AngularJS in the app. Include CUSTOM_ELEMENTS_SCHEMA in all modules where you will use custom elements:

    import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    export class AppModule {}

    see full source

  2. Register the Alan button Web Component. In main.ts, import the @alan-button component and call the defineCustomElements(window) method:

    import {defineCustomElements as alanBtnDefineCustomElements} from '@alan-ai/alan-button/dist/loader';

    see full source

  3. Add the Alan button HTML tag to the main app’s template. Open app.component.html and add the following tag:

      <alan-button #alanBtnEl alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE"></alan-button>
  4. In the Alan button HTML tag, replace YOUR_KEY_FROM_ALAN_STUDIO_HERE with the Alan SDK key for your Alan Studio project. To get the key, in Alan Studio, at the top of the code editor, click Integrations and copy the value from the Alan SDK Key field.

      <alan-button #alanBtnEl alan-key="ff4f9c03e405a5a07d43485dbc3cb44a2e956eca572e1d8b807a3e2338fdd0dc/prod"></alan-button>
  5. In the src/app folder, in app.component.ts, add the import statement for the Alan button Web Component:

    import "@alan-ai/alan-button";
  6. In the AppComponent class, use @ViewChild to add a reference to the Alan button element:

    @ViewChild('alanBtnEl', {static:false}) alanBtnComponent: ElementRef<HTMLAlanButtonElement>;
  7. Replace the first import statement with the following one:

    import { Component, ElementRef, ViewChild } from '@angular/core';
  8. In the AppComponent class, in the ngAfterViewInit() method, add a listener for the command event. All commands sent from the voice script will be passed to this method. It’s a place where you can set up logic on how the app will react to commands from the voice script.

    ngAfterViewInit() {
      this.alanBtnComponent.nativeElement.addEventListener('command', (data) => {
        const commandData = (<CustomEvent>data).detail;
        if (commandData.command === 'navigation') {
          /* Call client code that will react to the received command */

    see full source

That’s it. You can now add voice commands to the script in Alan Studio, run the app, click the Alan button and interact with the app with voice.


Regularly update the Alan AI packages your project depends on. To check if a newer version is available, run npm outdated. To update the package, run npm update <alan-package-name>. For more details, see npm documentation.

What’s next?

Upon integration, your app gets the in-app voice assistant that can be activated with the Alan button displayed on top of the app’s UI.

To build a full-fledged multimodal UX, you can use Alan’s SDK toolkit:


Client API methods

Enable communication between the client app and Alan and perform actions in the app.

Learn more


Alan handlers

Handle commands, understand the button state and capture events in the client app.

Learn more


Example apps

Find and explore examples of voice-enabled apps on the Alan AI GitHub repository.

View on GitHub