Header and Footer Integration

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 page served on your Creator Content Gallery.

For more information on this job please see this article.

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