React¶
Integrating with Alan¶
To integrate a React app with Alan:
Add the Alan 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 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 button to your React component:
React functional component
React functional component with HRM (Hot Module Replacement)
React class component
Client app¶import React, { useEffect } from 'react'; useEffect(() => { alanBtn({ key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE', onCommand: (commandData) => { if (commandData.command === 'go:back') { // Call the client code that will react to the received command } } }); }, []);
Client app¶import React, { useEffect, useRef } from 'react'; const alanBtnInstance = useRef(null); useEffect(() => { if (!alanBtnInstance.current) { alanBtnInstance.current = alanBtn({ key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE', onCommand: (commandData) => { if (commandData.command === 'go:back') { // Call the client code that will react to the received command } } }); } }, []);
Client app¶componentDidMount() { this.alanBtnInstance = alanBtn({ key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE', onCommand: (commandData) => { if (commandData.command === 'go:back') { // Call the client code that will react to the received command } }, }); }
For details, see Specifying the Alan button parameters.
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.
Trying the Alan sample app¶
In our GitHub repository, you can find a sample React app already integrated with Alan. Download the app to get an idea of how you can voice enable your React app and trigger actions in the app with voice commands.
What’s next?¶
Go to Script concepts to learn about Alan concepts and functionality you can use to create a voice script.