Product Demos

<iframe class="chmln-demo" loading="lazy" src="https://fast.chameleon.io/edit/demos/:id" style="width: 100%; height: 100%" allow="fullscreen"></iframe>

<iframe class="chmln-demo" loading="lazy" src="https://fast.chameleon.io/edit/demos/:id" style="width: 100%; height: 100%" allow="fullscreen"></iframe>

<iframe class="chmln-demo" loading="lazy" src="https://fast.chameleon.io/edit/demos/:id#consent=granted" style="width: 100%; height: 100%" allow="fullscreen"></iframe>

//
// All Demos start with consent mode 'pending' by default; Set to 'granted' or 'denied' after the user decides about tracking
//
const srcWithData = (url, data) => `${url.split('#')[0] || url}#${Object.entries({ ...Object.fromEntries(new URLSearchParams(url.split('#')[1])), ...data }).map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join('&')}`;

const demoElements = [...document.querySelectorAll('.chmln-demo')];
const trackingAllowed = true; // Note: Use your method to check for this true/false value
const consent = trackingAllowed ? 'granted' : 'denied';

demoElements.forEach(demoEl => demoEl.src = srcWithData(demoEl.src, { consent }));

window.addEventListener('message', message => {
  const { data: { kind, eventName, event = {} } = {} } = message;

  if(/^chmln:demo:/.test(kind)) {
    // TODO: Replace this block with your event tracking call (e.g. mixpanel.track(eventName, event); etc.)

    // Segment.com / Rudderstack
    analytics.track(eventName, event);

    // Adds this event into your data warehouse or other backend system
    sendEventToSnowflake(eventName, event);
  }
});

window.addEventListener('message', message => {
  const { data: { kind, eventName, event = {} } = {} } = message;

  if(/^chmln:demo:/.test(kind)) {
    // TODO: Replace this block with your event tracking call (e.g. mixpanel.track(eventName, event); etc.)
    // Below are a quick reference to the various tracking calls -- let us know if we're missing something here

    // Segment.com / Rudderstack
    analytics.track(eventName, event);

    // Freshpaint
    freshpaint.track(eventName, event);

    // Heap
    heap.track(eventName, event, 'chameleon'); // 'chameleon' as the third argument is for data grouping within Heap

    // Customer.io
    _cio.track(eventName, event)

    // Intercom
    Intercom('trackEvent', eventName, event)

    // Fullstory
    FS.event(eventName, event);

    // Google Analytics
    window.gtag('event', eventName, { ...event, event_category: 'Demo', event_label: event.demo_name });
  }
})

window.addEventListener('message', message => {
  const { data: { kind, demo, event = {} } = {} } = message;
  // `kind` is one of the value in the following table
  // `demo` is the full demo object
  // `event` will hold a nicely formatted object that can be passed to Segment, Mixpnel, Amplitude, etc. and you can expect at least the following 
  //   `event.demo_id`: the ID of the demo
  //   `event.demo_name`
  //   `event.tag_names`: The names of the tags set in the Chameleon dashboard
  //   `event.step_id`: the ID of the demo step
  //   `event.elapsed` : the time since the demo started
  //   ...others

  if (kind === 'chmln:demo:started') {
    //
    // The starting chapter or the first demo interaction was clicked
    //
    analytics.track('Chameleon Demo Started', event);

    //
    // An suitable Event name is prodvided for convenience and is used in the example above
    //
    const { eventName } = message.data;

    analytics.track(eventName, event);
    //
  } else if (kind === 'chmln:demo:completed') {
    //
    // The final chapter or final screen was reached
    //
    analytics.track('Chameleon Demo Completed', event);
    //
  } else if (kind === 'chmln:demo:step:started') {
    //
    // The user advances to this screen
    //
    analytics.track('Chameleon Demo Step Started', event);
    //
  } else if (kind === 'chmln:demo:component:clicked') {
    //
    // `event` will have component-specfiic data
    //   - `event.component_id`
    //   - `event.component_kind`: values such as hotspot, tooltip, sticker, etc.
    //   - `event.component_title`: the text/title of this component
    //   - `event.component_body`: the body/description of this component
    //
    analytics.track('Chameleon Demo Component Clicked', event);
    //
  } else if (kind === 'chmln:demo:form:submitted') {
    //
    // `event` will have form/button-specfiic data
    //   - `event.form_email`
    //   - `event.button_text`: the text of this button, e.g. 'Book demo'
    //
    analytics.track('Chameleon Demo Form submitted', event);
    //
    const { form } = message.data;
    //
    // `form` will contain form-specific data
    // `form.email`
  }
});