Embed AI Assistant in iframes

AI Assistant in iframes lets you use the AI Assistant inside an embedded GoodData dashboard. Users can open the assistant from the embedded dashboard and ask questions without leaving the host application.

Developers can also control the assistant panel from the host application by using postMessage. This lets you use your own application UI, such as a custom Ask AI button, while keeping the assistant inside the embedded dashboard context.

How It Works

When AI Assistant is enabled for an embedded dashboard, the assistant is available inside the dashboard iframe. The assistant panel opens as part of the embedded dashboard experience and keeps the user in the host application.

You can use this feature to:

• provide AI-powered analytics in an embedded dashboard
• let users ask questions about dashboard data in context
• open or close the assistant panel from the host application
• hide the default assistant entry point and use your own custom UI
• listen for assistant panel visibility changes and keep host application state in sync

Enable AI Assistant in an Embedded Dashboard

To use AI Assistant in an iframe, the dashboard must be embedded using the dashboard iframe URL.

Example:

<iframe
    title="My Embedded GoodData Dashboard"
    id="embedded-dashboard"
    src="<host_url>/dashboards/embedded/#/workspace/<workspace_id>/dashboard/<dashboard_id>"
    height="800px"
    width="100%"
    frameborder="0"
></iframe>

AI Assistant availability depends on your organization configuration, workspace permissions, and enabled AI features.

Control the Assistant Panel from the Host Application

You can open or close the AI Assistant panel by sending a postMessage command to the embedded dashboard iframe.

Toggle AI Assistant

Use the toggleAIAssistant command to toggle the AI Assistant panel visibility.

const cmd = {
    gdc: {
        product: "dashboard",
        event: {
            name: "toggleAIAssistant",
            data: {
                requestId: "<request_id>"
            }
        }
    }
};

iframeEl.contentWindow.postMessage(cmd, "<gooddata_origin>");

Replace:

• <request_id> with a unique identifier that you can use for request tracking
• <gooddata_origin> with the origin of your GoodData deployment

Listen for Assistant Panel Visibility Changes

The embedded dashboard sends an event when the AI Assistant panel visibility changes.

Event name: aiAssistantDialogVisibilityChanged

Example payload:

{
    "gdc": {
        "product": "dashboard",
        "event": {
            "name": "aiAssistantDialogVisibilityChanged",
            "data": {
                "isVisible": true
            }
        }
    }
}

Use the isVisible value to update your host application UI. For example, you can keep a custom Ask AI button in sync with the assistant panel state.

Example listener:

window.addEventListener("message", function (event) {
    if (event.origin !== "<gooddata_origin>") {
        return;
    }

    const gdEvent = event.data.gdc?.event;

    if (gdEvent?.name === "aiAssistantDialogVisibilityChanged") {
        const isVisible = gdEvent.data?.isVisible;

        // Update your host application UI.
        console.log("AI Assistant visibility changed:", isVisible);
    }
});

Use a Custom Assistant Entry Point

You can use your own host application UI to open the AI Assistant.

For example, you can add an Ask AI button in your application and send the toggleAIAssistant command when the user clicks it.

If you hide the default assistant entry point in the embedded dashboard, make sure your application provides another way to open the assistant.

Current Limitations

The following limitations apply in the current experimental version:

• AI Assistant in iframes is available for embedded dashboards.
• Switching the assistant panel state while the iframe is still loading may not be available in all environments.
• Tag-based scoping of what the AI Assistant can access in the embedded context is not included in the current documented scope.
• Links from AI Assistant responses to GoodData analytics views may not be available in the embedded context.
• Panel layout options, such as custom panel width, side, offset, or z-index, are not configurable.
• Theming of the assistant panel from the host application is not supported.