Cross-Frame Events

Send demo analytic events cross origin

You can now send Storylane demo analytics cross-frame to 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 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 webpage then each user interaction will trigger an event that will be sent through window.postMessage(). Below is example of event payload sent from Storylane demo iframe

//Storylane sends these postMessage events from iframe to 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 in 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 
{
  : '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  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;
  };
}

See example below of sending events to GA