How To: Dynamically switch brands within an Embeddable

Using CSS variables to reuse a single Embeddable for multiple brands

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

Method 1: Adding a <style> tag to the page

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).

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).

Depending on the exact load sequence, you may see the original styles flash up for a second.

1. Create an onload Action that sets the CSS variables

   • In the Builder, create an Action, and set up a Trigger so that it runs when the Embeddable Loads.
   • In the Action custom code, set the CSS variables on the page based on the URL, like in this example:

   function output() {
     const domain = window.location.host;
     const styles = getStylesFromDomain(domain);
   
     if (styles && typeof styles === "object") {
       const root = document.documentElement;
       Object.entries(styles).forEach(([key, value]) => {
         root.style.setProperty(key, value);
       });
     }
   }
   
   function getStylesFromDomain(domain) {
     switch (domain) {
       case "example.com":
         return {
           "primary-color": "#ff5733",
           "secondary-color": "#33ff57",
           "font-size": "16px",
         };
       case "another-site.com":
         return {
           "primary-color": "#3366ff",
           "secondary-color": "#ffcc00",
           "font-size": "18px",
         };
       default:
         return {};
     }
   }
   

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.

Assistant

Responses are generated using AI and may contain mistakes.