> For the complete documentation index, see [llms.txt](https://docs.guideflow.com/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.guideflow.com/help/integrations/cross-frame-events.md).

# Cross-frame events

**Summary**

Event propagation enables Guideflow to transmit events to the website hosting the Guideflow. By configuring event propagation, interactions within your Guideflow can be communicated to your site or web application, allowing you to respond accordingly. This feature has numerous applications, but one example is enhancing your website's analytics with information from Guideflow events.

Setting up event propagation requires a bit of coding, specifically adding an event listener so that you will need assistance from someone with coding expertise.

Events within a Guideflow are monitored and transmitted to Guideflow's analytics service. These events are then processed and made accessible via Guideflow Analytics. For many clients, this might suffice to evaluate the performance of their Guideflows. Nevertheless, there could be instances where a client wishes to integrate Guideflow event tracking with their analytics system.

To listen to Guideflow  events, you need add the following code:

```
window.addEventListener('message', (event) => {
      if (event.origin === 'https://app.guideflow.com') {
            // Event data.
           console.log(event.data);
      }
});
```

***

**These are events that are propagated to the website and their corresponding parameters.**

\
**Start Session - event parameters:** 

```
    {
      eventName: string;
      totalSteps: number;
      flowTitle: string;
      customLinkId: number | null;
      data?: object;
      source: string;
      sessionHash: string;
      publicPageId: number | null;
      flowId: number;
      parentSessionHash: string | null;
      screenWidth: number;
      screenHeight: number;
      visitorInstanceHash: string;
      userHash: string;
      authorizedUserId: number | null;
      createdAt: Date;
    }
```

**Start Step - View:** 

```
{
      eventName: string;
      slideId: number;
      slideTitle: string;
      slideOrderId: number;
      sessionHash: string;
      flowId: number;
      publicPageItemId: number;
      userHash: string;
      authorizedUserId: number | null;
      createdAt: Date;
 }
```

**End Step - View**:  

```
{
      eventName: string;
      slideId: number;
      timeSpent: number;
      slideOrderId: number;
      slideTitle: string;
      sessionHash: string;
      flowId: number;
      totalSpentTime: number;
      publicPageItemId: number;
      completionRate: number;
      childSessionHash: string;
      userHash: string;
      authorizedUserId: number | null;
      createdAt: Date;
    };
```

**Guideflow Completed**

```
{
      eventName: string;
      userHash: string;
      authorizedUserId: number | null;
      createdAt: Date;
      sessionHash: string;
      flowId: number;
      parentSessionHash: string | null;
    }
```

**End Session**

```
{
      eventName: string;
      visitedSteps: number;
      totalSteps: number;
      sessionHash: string;
      flowId: number;
      parentSessionHash: string | null;
      userHash: string;
      authorizedUserId: number | null;
      createdAt: Date;
      data?: {
        flowTitle: string;
        variables: Record<string, string>;
        os: {
        name: string | undefined;
        version: string | undefined;
        };
        percentOfCompletion: number;
        totalSpentTime: number;
      };
    }
```

**External Link Clicked**

```
{
      eventName: string;
      url: string;
      location: string;
      flowId: number;
      sessionHash: string;
      userHash: string;
      authorizedUserId: number | null;
      createdAt: Date;
    }
```

**Checklist item clicked**

```
{
      eventName: string;
      itemTitle: string;
      itemId: number;
      itemUUID: string;
      itemType: string;
      itemOrderId: number;
      itemExternalLink: string | null;
      itemTargetSlideId: number | null;
      itemTargetFlowId: number | null;
      itemTargetSlideTitle: string | null;
      itemTargetSlideOrderId: number | null;
      sessionHash: string;
      flowId: number;
      userHash: string;
      authorizedUserId: number | null;
      createdAt: Date;
    }
```

\
**Example of sending events to Google Analytics**

{% embed url="<https://codepen.io/Tek/pen/ZEPKYJY>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.guideflow.com/help/integrations/cross-frame-events.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.