Embedded UI

Get Started

To embed the Yofi UI into your website, use the following code snippet:

<iframe
    ref={iframeRef}
    title="portal"
    src="THE-EMBED-URL"
    style={{ border: 'none', width: '100%', height: '100%' }}
></iframe>

Please provide your product domain, and Yofi will add it to the whitelist for allowing iframe embedding.

Send events to the iframe

const message = {
    type: "EVENT_TYPE",
    data: "YOUR_DATA"
};
iframeRef.current.contentWindow.postMessage(message, 'THE-EMBED-ORIGIN');

Supported Messages

Event	Message Sample
Show customer detail	{ type: 'SHOW_CUSTOMER_DETAIL', data: { id: 'CUSTOMER-ID', token: 'JWT-TOKEN(OPTIONAL)' } }
Show order detail	{ type: 'SHOW_ORDER_DETAIL', data: { id: 'ORDER-ID', token: 'JWT-TOKEN(OPTIONAL)' } }
Set auth token (How to)	{ type: 'SET_TOKEN', data: 'JWT-TOKEN' }
Reload page	{ type: 'RELOAD' }

Listen to events from the iframe in your app

The iframe may send messages back to your application. For instance, it might send an TOKEN_REFRESH event if the token expires. Here's how you can listen for messages from the iframe:

window.addEventListener('message', (event) => {
    // Ensure the message is coming from the trusted origin
    if (event.origin !== "THE-EMBED-ORIGIN") {
        return;
    }

    if (event.data.type === 'TOKEN_REFRESH') {
        // Handle the token refresh logic here, e.g., send a new token
        const newTokenMessage = {
            type: 'SET_TOKEN',
            data: 'NEW_JWT_TOKEN'
        };
        iframeRef.current.contentWindow.postMessage(newTokenMessage, event.origin);
    }
});

Passing the Token via Query Parameter

You can also pass the token to the iframe by including it as a query parameter in the iframe's URL.

const token = 'YOUR_JWT_TOKEN';
const embedUrl = `THE-EMBED-URL?token=${token}`;

<iframeref={iframeRef}title="portal"src={embedUrl}style={{ border: 'none', width: '100%', height: '100%' }}
></iframe>

You can open order page and customer page with:

https://embed.yofi.ai/customers/customersDetail/{customer-id}?token=the_token
https://embed.yofi.ai/orders/ordersDetail/{order-id}?token=the_token

Please change https://embed.yofi.ai to https://embed.botnot.ioif you want to use this in production env.

Key Notes

• Ensure the iframe source (src) and origin (urlOrigin) are correctly set to match your environment.

• Always verify the origin of incoming messages to prevent security vulnerabilities.

• Use the provided event types and data structures to communicate effectively with the iframe.

---

React Sample

import { useEffect, useRef } from 'react';

export default function ReactSample() {
    const urlOrigin = 'https://embed.botnot.io';
    const iframeRef = useRef(null);
    const token = 'YOUR_JWT_TOKEN';
    const customerId = '7701204009241';

    const postMessageToIframe = (message) => {
        if (iframeRef.current && iframeRef.current.contentWindow) {
            // Post the message to the iframe
            iframeRef.current.contentWindow.postMessage(message, urlOrigin);
        }
    };

    const sendToken = () => {
        postMessageToIframe({
            type: 'SET_TOKEN',
            data: token,
        });
    };

    const showCustomerDetail = (id) => {
        postMessageToIframe({
            type: 'SHOW_CUSTOMER_DETAIL',
            data: { id },
        });
    };

    const handleIframeMessage = (event) => {
        // Ensure the message is coming from Yofi origin
        if (event.origin !== urlOrigin) {
            return;
        }
        if (event.data.type === 'TOKEN_REFRESH') {
            sendToken();
        }
    };

    useEffect(() => {
        window.addEventListener('message', handleIframeMessage);

        // Cleanup function to remove the event listener
        return () => {
            window.removeEventListener('message', handleIframeMessage);
        };
    }, []);

    return (
        <iframeref={iframeRef}title="yofi"src={urlOrigin}style={{border: 'none',
                width: '90vw',
                height: '80vh',
                background: 'transparent',
                borderRadius: 10,
            }}
            onLoad={() => {
                sendToken();
                showCustomerDetail(customerId);
            }}
        ></iframe>
    );
}