React
Available on Web platform.
Integration
-
Install the
@alan-ai/alan-sdk-web
package and import thealanBtn
into your component:$ npm install @alan-ai/alan-sdk-web --save
import alanBtn from "@alan-ai/alan-sdk-web";
Or just add the
alan_lib.js
library to your index.html page via script tag:<script type="text/javascript" src="https://studio.alan.app/web/lib/alan_lib.min.js"></script>
-
Add the Alan button to your React component
- If you use React Functional Components:
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 } } }); }, []);
- If you use React Functional Components with HMR (Hot Module Replacement):
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 } } }); } }, []);
- If you use React Class Components:
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 Alan button parameters.
Integration example
See an example of the React app with the Alan button here.