Documentation

Powered by Algolia

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.