External Header/Footer code

Developing with LiveWhale
1

I thought we were able to bring in external header and footer code but I couldn’t find reference to that in the documentation on my own search. Is this something that’s still available in the current versions of the site, or has that functionality been removed?

We’re working on a new template version of the calendar and just wanted to check if we needed to manually edit the header/footer code or if we could pump out a version and allow LW to consume it off our website.

Thanks,
Greg

2

Hi Greg,

Ah, yes, good question. While it is possible that LiveWhale could load these templates dynamically, it’s not very common. Only a few schools out in the wild have nailed it. It’s a little technically complex, so for most schools we find it’s easier to just maintain a static copy of the header/footer on the calendar side and if any updates are pushed to the main site, they get copied to the LiveWhale Calendar site as well.

If it is something you’re still interested in, it’s the sort of thing you’ll more than likely need some hands-on help from our team. If that’s the case, please feel free to reach out via the Request Help Form and we can dive in from there.

Hope that helps! Thanks,
Rachael

3

Is there still documentation available for this? I’m willing to put in the work, but I would just like to know where to start.

4

Hi Greg,

Sure thing – basically the LW file include widget you probably can find in your _ingredients like this:

<widget type="file">
<arg id="path">/_ingredients/themes/global/includes/header.html</arg>
</widget>

can also support absolute URLs:

<widget type="file">
<arg id="path">https://www.myschool.edu/templates/calendar-header.html</arg>
</widget>

You can try that kind of thing out on dev, and then the main work is in having your CMS generate a fully standalone header/footer (and a head.html include for styles/scripts if needed) that works when loaded verbatim into the calendar. Some folks have versions that work great for this, other times people have CORS font issues or relative-link bugs that need working through.

Or, as an alternate path, I’ve seen at least one school who creates a fully standalone “main-nav.js” hosted on their main .edu site, and then they can drop that into any 3rd-party platform and it will do all the work on the browser side of loading in and styling the currently-active sitewide header on that page. A different task development-wise, but also something you could consider. Hope this helps!

1 Like