Embeddable components design

In a recent inteview I was asked to design a system for a embeddable components. These components can be added to any website, blog pages, etc. This is how I would approach it now.

Question to be asked?

  • Who are the users of this embeddable components, are the users tech savy/non-tech?
  • Will these components be responsive?
  • Are these interative or static components?
  • Do we want to send analytics based on the usage of these components

Pieces needed to build this system

Based on the questions above come up with pieces that will be needed by the system.

  • User Dashboard: It will have list of all components that a user can select from.

    • List of currently used user components with there associated config.
    • Dashboard gives the ability to add, remove, and update component configuration.
    • Adding a new component would give the user a new script tag which can be embbed in any website.

  • Host website: website where user will add this component

    • There could be 2 ways to add these components into the target location, using an iframe or a script tag.
    • We will go with the script based approach because it allows interaction with host page. We will compile your React component into a JavaScript bundle. Third-party websites then include a small script tag that loads this bundle, and your React component mounts itself onto a specific element on the host page.

API's needed/Component Schema

Based on the pieces these are the API's that will be needed.

// generates a new script tag based on 
// some default config
addComponent(componentConfig) => <script src=''/>

// new config based on host page design.
// Returns the updated script tag
updateComponentConfig(newConfig) => <script src=''/>

// Component schema
{
    type: "button" | "link",
    config: {
        primaryColor: "black",
        isActive: false,
        ...
    }
}

Questions for further discussion

  • Not all website providers may give a way of adding script tags, how would you solve this?
  • How will you store all these script files?

References