Powered by Algolia

Alan Ionic Framework

Available on Web, iOS, Android platforms.

In this tutorial we will show you how to add the Alan Button to the Ionic Application.


To integrate an Ionic app built with Angular with Alan:

  1. In the terminal, set a path back to your application.
  2. Add the Alan Cordova plugin to the app:

    $ npm install @alan-ai/cordova-plugin-alan-voice --save
  3. Add the @alan-ai/alan-button package to the app:

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

    For Ionic apps, you need the @alan-ai/alan-button and @alan-ai/cordova-plugin-alan-voice packages, not the @alan-ai/alan-sdk-web package. Ionic apps can be run on mobile devices with Cordova; they require special versions of the Alan button.

  4. Modify the app to enable the Alan voice button.

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

    // app.module.ts file
    import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    export class AppModule {}

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

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

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

    <--  app.component.html -->
        <alan-button #alanBtnEl alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE"></alan-button>

    d. In the Alan button HTML tag, replace YOUR_KEY_FROM_ALAN_STUDIO_HERE with the Alan SDK key provided in your Alan Studio project:

    <--  app.component.html -->
        <alan-button #alanBtnEl alan-key="ff4f9c03e405a5a07d43485dbc3cb44a2e956eca572e1d8b807a3e2338fdd0dc/prod"></alan-button>
  5. In the src/app folder, in app.component.ts, make the following changes:

    a. Add the import statement for the Alan button Web Component:

    import "@alan-ai/alan-button";

    b. In the AppComponent class, use @ViewChild to add a reference to the Alan button element:

    @ViewChild('alanBtnEl', {static:false}) alanBtnComponent: ElementRef<HTMLAlanButtonElement>;

    c. Replace the first import statement with the following one:

    import { Component, ElementRef, ViewChild } from '@angular/core';

    d. 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 the commands from the 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 the Alan Studio, run the app, click the Alan button and interact with the app with voice.

Running demo apps

To run a demo app on the device or simulator, use the commands below:

  1. Run ionic cordova platform add ios or ionic cordova platform add android
  2. Run ionic cordova plugin add @alan-ai/cordova-plugin-alan-voice
  3. Run ionic cordova plugin add cordova-plugin-ios-microphone-permissions
  4. Run ionic cordova build ios or ionic cordova build android
  5. Run ionic cordova run ios or ionic cordova run android

Please note that the Alan Button won't work if you run your application via Ionic DevApp. The Ionic DevApp works with the limited list of Cordova plugins, and while there is no @alan-ai/cordova-plugin-alan-voice in this list, the button won't appear.