​
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 How To: Decide how 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 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 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

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

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!

How To: Decide how to send/receive dataHow To: Run custom code on first load