React

Available on Web platform.

Integration

1. Install the @alan-ai/alan-sdk-web package and import the alanBtn 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>

2. 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.