Creatable Storefronts Integration

Provide Header/Footer endpoints

There are two supported methods for providing Header/Footer endpoints for integration with your gallery; 1) Providing a blank page, and 2) Providing Javascript endpoints.

1) Providing a blank page

The simplest method for header and footer integration is to provide Creatable with a blank content page on your site that loads only the header and footer. Creatable will create a scheduled job to scrape the assets on this page daily in order to render your header and footer onto each Creator Storefront.

2) Javascript endpoints

Several items are required as part of the code bundle that needs to be included for the Creatable storefronts.

1. CSS (main stylesheet(s) from the e-commerce site)
2. JS Loader (a JS bundle that loads additional assets and injects HTML content into the page)
3. HTML DOM elements to target for inclusion of the:
   1. Header
   2. Footer

Note that the JS loader can load any or all of the linked assets as needed, be sure to check that there are no CORS errors and that the proper CORS headers are set when serving these assets.

The semantic HTML markup used for website headers and footers is <header> and <footer>, respectively. We recommend using these as a best practice.

A basic example of the code that needs to be provided to Creatable:

HTML:

<header></header>

<footer></footer>

CSS:

<link rel=”stylesheet” href=”//cdn.yourstore.com/assets/header-footer-bundle.css” />

JS:

<script type=”application/javascript” src=”//cdn.yourstore.com/assets/header-footer-bundle.js” async />

In the above example, all of the elements to load and render the header and footer dynamically are present. As header or footer changes are made on the e-commerce website, these assets would be updated automatically, since they are being referenced from the e-commerce website.

The HTML elements would be used to inject the header and footer HTML respectively.

The CSS would style that injected HTML appropriately.

The JS would load any additional libraries or dependencies needed to make the header and footer fully functional.

A simple way to test that the header and footer work as intended would be to implement them on an empty webpage, located on a separate domain. If everything is operating correctly, you should see the header and footer from the e-commerce website, and an empty body area.

This code can be provided to your client success representative for testing and integration into the Creatable gallery.

Provide a subfolder or subdomain

Your creator content hub can reside in one of two different locations on your site:

Subfolder (domain.com/{subfolder}/) (Recommended)
Subdomain ({subdomain}.domain.com)

Embeddable content on the Creatable Social Commerce Cloud will also be tied to the designated domain of choice. Each of these methods has different IT requirements.

Subfolder

Configure your CDN to reverse-proxy requests from your website to Creatable. This means that when a user requests domain.com/{subfolder}/video1, the request is routed to the Creatable platform. Creatable will render the HTML and return that to the CDN, and return it to the end user.

Subdomain

This configuration requires two CNAME entries on your DNS record (one for the subdomain to be used, and one for validation so that we can issue a SSL certificate) and involves setting up a new subdomain within your primary domain. The process generally take just a few minutes. Once configured, Creatable will complete the setup for your account.

If you have any questions about performing either of the steps outlined above, please reach out to your client success representative, or email support@creatable.io