The powerful logic available in Embeddables means that it often makes sense to re-use a single Embeddable for multiple brands, if the general logic and content is consistent across those brands.

This doc shows you how to inject styles and content into an Embeddable from the parent page, so that its appearance can change based on the URL.

​
Updating the styles based on the URL

This method works well if you have a different page for each brand, each with the same Embeddable embedded in it.

1

Create CSS variables in a <style> tag in the parent page

  • On the parent page of the first brand, where you embed the Embeddable, add a <style> tag in the HTML that looks like this, replacing the variable names and styles with what you need for your brand:
<style>
  body {
    --font-headings: "Raleway", sans-serif;
    --font-body: "Open Sans", sans-serif;
    --color-primary: #e74c3d;
    --color-secondary: #03c4eb;
    --color-buttons-primary: #d9534f;
  }
</style>
  • Each of the lines inside the body {} creates a CSS variable, which can be referred to later from inside the Embeddable in the Builder.
  • Repeat this for the other pages that will host the other brands.
2

Use those CSS variables in the Builder

  • In the Embeddables Builder, refer to those CSS variables in the Designer using the format var(--font-headings).
  • This will mean that the Embeddable will use whichever value is present for that CSS variable in the current page.
  • To set a default value for the style property (e.g. to view it in the Builder, or as a backup for parent pages that might not have set up those styles), you can use the format var(--my-variable-name, [DEFAULT_VALUE]).
    • For example: var(--font-color, #676767).
Instructions on changing content based on the URL are coming soon.