​
Use-cases

Some common use-cases that we often see:
  1. I want to prefill data like email addresses into my Embeddable that users have already entered previously on my site.
  2. I want to prefill data from my Embeddable into an embedded component inside it, like a Calendly booker or Stripe component.
  3. I want to pass data like email addresses out of my Embeddable to be used on a subsequent page on my website.
This doc is for passing data to be immediately prefilled somewhere in front of the user.For ways of sending/receiving the data to/from an external source like an API, database or SaaS app, check out Guides: Deciding how best to send/receive data

​
Passing data into an Embeddable to prefill fields (e.g. email address)

​
Method 1: URL params

1

Add the fields into the URL as params

  • For example: https://mywebsite.com/onboarding?email=ada@lovelace.com.
  • Make sure that this is the URL when the Embeddable first loads, since that’s when it will look for URL params.
2

Set those fields to be URL-controlled

  • Head to the Embeddable-wide settings
  • Go to the More tab
  • Add the fields to the URL Keys block, separated by newlines.

​
Method 2: Embed code keys/attributes

1

Add each field as an attribute on the <savvy> HTML element

  • For example: <savvy id="flow_abc" email="ada@lovelace.com"></savvy>.
  • Make sure that these attributes are present when the element is first added to the DOM, since that’s when it will look for URL params.
2

Set those fields to be Embed Code-controlled

  • Head to the Embeddable-wide settings
  • Go to the More tab
  • Add the fields to the Embed Code Keys block, separated by newlines.

​
Method 3: Custom code using Window variable

This works best when you want to prefill data immediately (as soon as the Embeddable loads).
1

Place the data on a Window variable in your website/webapp

  • From within your website or webapp, create a variable in the Window scope with a unique name.
  • Add the data you want to prefill into that variable.
  • Make sure to that this happens before the Embeddable loads.
Your Website/Webapp Code
window.myEmbeddablesPrefillData = {
  email: 'ada@lovelace.com'
}
2

Add a custom code Action, triggered on first load

For more info on how to do this, check out:

How To: Run custom code when the Embeddable loads

Setting up a custom code Action that executes when the Embeddable first loads.
3

Grab the data from the Window variable, and then set the User Data

  • Pull out the data from the Window variable that you set up in Step 1.
  • Then use helperFunctions.setUserData() to set the User Data based on the payload sent with that event:
Custom Code Action - Triggered on First Load
function output(userData, helperFunctions) {
  const dataToPrefill = window.myEmbeddablesPrefillData
    if (dataToPrefill) {
      helperFunctions.setUserData(dataToPrefill);
    }
  });
}

​
Method 4: Custom code using custom Window event

This works best when you want to prefill data after the Embeddable has already loaded
1

Add a custom code Action, triggered on first load

For more info on how to do this, check out:

How To: Run custom code when the Embeddable loads

Setting up a custom code Action that executes when the Embeddable first loads.
2

Listen for a custom Window event, and then set the User Data

  • Use window.addEventListener() to listen for a custom event that you will define.
  • Then use helperFunctions.setUserData() to set the User Data based on the payload sent with that event:
Custom Code Action - Triggered on First Load
function output(userData, helperFunctions) {
  window.addEventListener('embeddables:my_custom_prefill_event', (event) => {
    const detail = event.detail || {};
    const dataToPrefill = detail.prefill_data
    if (dataToPrefill) {
      helperFunctions.setUserData(dataToPrefill);
    }
  });
}
3

Send the custom Window event from your website/webapp

  • From your website or webapp, create a new Custom Event with the prefill data, and send it to the Window:
Your Website/Webapp Code
const myEvent = new CustomEvent('embeddables:my_custom_prefill_event', {
  detail: {
    prefill_data: {
      email: 'ada@lovelace.com'
    }
  }
})
window.dispatchEvent(myEvent);
This page is unfinished and is queued up to be completed soon - watch this space!