Documentation

Powered by Algolia

Alan Web Component


Available on the Web platform.

The Alan button can be added to your application as a Web Component. Using the Alan Button 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>

The Alan Button Web Component can be used in:

  • Ionic app
  • Electron app
  • Angular app
  • React app
  • Vue.js app
  • Ember app
  • Vanilla JS app

Web Component API

The Alan button can be added to your application as a Web Component. This is an instruction of how you can add the Alan button to the page as a Web Component:

  1. Add source code of the Alan Button Web Component to your page/project. Install @alan-button package from npm (npm install @alan-button):

    • Use it in your project with import statement
    • or add the following script tag to your HTML page: <script src="(path_to_node_modules)/@alan-button/dist/alancomponents.js"></script>
  2. Add the following tag to the HTML page, view, or template:

    <alan-btn id="myAlanBtn"
    		alan-key="0717498b05e694d0b083b897e50a49102e956eca572e1d8b807a3e2338fdd0dc/stage"></alan-btn>

Adding the Alan Button Web Component doesn't differ from adding any other Web Component. We support several frameworks: Ionic, Angular, React, Vue, Ember. You can also use the Alan Button Web Component in your Electron app or Vanilla JS app.

Web Component attributes

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

Methods

setVisualState (visualStateData: object)

Method for setting the visual state. For details, see Visual state.

visualStateData - data that represents a visual state

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

  myAlanBtn.componentOnReady().then(function () {
      myAlanBtn.setVisualState({screen: 'homePage'});
  });

callProjectApi (method:string, data:object, callback:function)

Method for calling a project API defined in the script in the Alan Studio project. For details, see projectAPI.

method - projectAPI method name that was defined in the voice script

data - data that should be passed

callback - callback that could be called from project API method

  //(in the script in AT project)
  projectAPI.myFunc = (p, param, callback) => {
    p.play("myFunc was called");
    p.play(param);
    callback(null,{"newParam":111});
  };

  //(in the JS script)
  var myAlanBtn = document.getElementById('myAlanBtn');
  myAlanBtn.componentOnReady().then(function () {
    myAlanBtn.callProjectApi("myFunc", {myData: 123}, function (error, result) {
      console.log("cb from myFunc was received", error, result);
    });

  });

playText(text:string)

Method for playing voice

text - text that should be played

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

  myAlanBtn.componentOnReady().then(function () {
      myAlanBtn.playText("Hi! I am Alan");
  });

playCommand(command:object)

Method for sending a command

command - object that represents a command

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

  myAlanBtn.componentOnReady().then(function () {
      myAlanBtn.playCommand({command:"navigate", screen: "settings"});
  });

activate()

Method for turning on the Alan Button programmatically

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

  myAlanBtn.componentOnReady().then(function () {
      myAlanBtn.activate();
  });

deactivate()

Method for turning off the Alan button programmatically

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

  myAlanBtn.componentOnReady().then(function () {
      myAlanBtn.deactivate();
  });

Events

command

Received when command is received from the AT script.

  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 button is obtained.

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

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