Google

Learn how to integrate using our Javascript SDK

React

Example implementation of Google integration with FutureAI SDK

Initiate the session

import { Future } from '@future-sdk/future-js';
import { useEffect, useState, useRef } from 'react';
const Page = () => {
  const [isSuccess, setIsSuccess] = useState(false);
  const [options, setOptions] = useState<OptionData[]>([]);
  const [generativeResultsLoaded, setGenerativeResultsLoaded] = useState(false)
  const sessionStartedRef = useRef(false); // Ref to keep track of session state

  useEffect(() => {
    if (sessionStartedRef.current) return; // Prevent multiple session starts
    sessionStartedRef.current = true;

    try {
      Future.startFutureSession({
        apiKey: import.meta.env.PUBLIC_ENV__API_KEY,
        iframeUrl: import.meta.env.PUBLIC_ENV__IFRAME_SERVER_ROOT,
        websocketUrl: import.meta.env.PUBLIC_ENV__WEBSOCKET_ROOT,
        serverUrl: import.meta.env.PUBLIC_ENV__SERVER_ROOT,
        onSessionUpdate: (session: any) => {
          if (session.lastEventName === 'LinkedAccountCreated') {
            setIsSuccess(true);
          }
          if (session.lastEventName === 'UserGenerativeResults') {
            setGenerativeResultsLoaded(true);
            const categories = session?.results.map(
              (category: string, index: any) => {
                return {
                  id: index,
                  label: category,
                  isSelected: false,
                };
              },
            );
            setOptions(categories);
          }
        },
        onError: (errorEvent: CustomEvent<any>) => {
          console.error(
            `error from onError: ${JSON.stringify(errorEvent.detail)}`,
          );
        },
      });

      Future.createFutureButton({
        container: '.future-button',
        merchantFlowId: `${import.meta.env.PUBLIC_ENV__FLOW_ID}`,
      });
    } catch (e) {
      console.error(e);
    }
  }, []);

  return (
    <Flex direction="column" justifyContent={'space-between'} height={'100vh'}>
      {!isSuccess && <Banner />}
      {isSuccess && !generativeResultsLoaded && (
        <Loading/>
      )}
      {isSuccess && generativeResultsLoaded && (
        <Results description={resultsText} options={options} />
      )}
    </Flex>
  );
};

export { Page };

Create the FutureAI button component

useEffect(() => {
    Future.createFutureButton({
      merchantFlowId: process.env.NEXT_PUBLIC_FUTUREAI_FLOW_ID,
      container: "#future-button",
      skipIntro: true,
    })
  }, [])