Cross-Frame Events

Send demo analytic events cross origin

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(). Below is an example of an event payload sent from Storylane demo iframe

//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

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 event.data.payloadfor different analytic events sent from Storylane Demo

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

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

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

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

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

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

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

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

Example of sending events to GA