# Cross-Frame Events

You can now send Storylane demo analytics cross-frame to the hosting website. If you are embedding Storylane demo on your webpage, then real-time analytics events can now be subscribed on your webpage.  Some use cases can be:

* Launching chat window based on user action in the demo
* Displaying demo-booking calendar based on user action
* Combine Storylane analytics with additional user info and send to your analytics stack

## **Implementation**

When Storylane demo is embedded on a webpage then each user interaction will trigger an event that will be sent through [`window.postMessage()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). Below is an example of an event payload sent from Storylane demo iframe

```json
//Storylane sends these postMessage events from iframe to the parent window
window.parent.postMessage(
{
  message: 'storylane-demo-event',
  payload: {
    event: 'step_view';
    demo: {
      id: string;
      url: string;
    };
    step: {
      id: string;
      index: number; // starts with 1  
    };
    flow: {
      id: string;
      name: string;
    };
   }
 },
'*'
)

```

You will subscribe to the above events like below on your webpage so it can be processed 

```json
window.addEventListener('message', (event) => {
  if (event.data.message === 'storylane-demo-event') {
    //do something here based on event type
    // 1. send event to GA, Amplitude, mixpanel etc
    // 2. open chat window
    // 3. open meeting calendar ..or anything else
  }
})
```

Below are different <mark style="color:blue;">`event.data.payload`</mark>for different analytic events sent from the Storylane Demo

```json
// sent when demo loads first time 
{
  event: 'demo_open';
  demo: {
    id: string;
    url: string;
    name: string;
  };
}

// sent when a guided step (hotspot, walkthrough, or modal) is displayed
{
  event: 'step_view';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  step: {
    id: string;
    index: number; // starts with 1  
  };
  flow: {
    id: string;
    name: string;
  };
}

// sent when demo is finished and user went through all steps/flows
{
  event: 'demo_finished';
  demo: {
    id: string;
    url: string;
    name: string;
  };
}

// sent when a lead is captured through form or URL params
{
  event: 'lead_identify';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  lead: {
    email: string;
    [key: string]: string; // e.g. first_name, last_name, company, etc...
  }
}

// sent when the user clicks on the CTA in button to the external URL
{
  event: 'open_external_url';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  step: {
    id: string;
    index: number; // starts with 1  
  };
  flow: {
    id: string;
    name: string;
  };
  target: {
    url: string;
    target: '_blank' | '_self';
  }
}

// sent when an item in the checklist is clicked
{
  event: 'checklist_item_view';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  checklist_item: {
    id: string;
  }
}

// sent when flow started by user
// You need to have multiple flows and a checklist configured for this
{
  event: 'flow_start';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  flow: {
    id: string;
    name: string;
  };
}

// sent when the last step in flow was viewed 
{
  event: 'flow_end';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  flow: {
    id: string;
    name: string;
  };
}

// sent on every page change
{
  event: 'page_view';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  page: {
    id: string;
    name: string;
  }
}

// sent when the user clicks a primary button in the guide
{
  event: 'primary_cta';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  step: {
    id: string;
    index: number; // starts with 1  
  };
  flow: {
    id: string;
    name: string;
  };
}

// sent when the user clicks a secondary button in the guide
{
  event: 'secondary_cta';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  step: {
    id: string;
    index: number; // starts with 1  
  };
  flow: {
    id: string;
    name: string;
  };
}

// sent when the user clicks a convert CTA button in the demo
{
  event: 'convert_cta';
  demo: {
    id: string;
    url: string;
    name: string;
  };
  step: {
    id: string;
    index: number; // starts with 1  
  };
  flow: {
    id: string;
    name: string;
  };
}


```

## **Example of sending events to GA**

{% embed url="<https://jsfiddle.net/storylane/Lwotsvdr/>" %}


---

# 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.storylane.io/integrations/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.