# 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: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

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

The question should be specific, self-contained, and written in natural language.
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.