Coursedog

Submit a ticket My Tickets
Welcome
Login  Sign up

Embedding Custom HTML Snippets for Institutional Headers/Footers

Coursedog's catalog product allows institutions the option to customize their public catalog fully-- from customizing the color of web elements to including branded assets like logos in the navigation and footer. One of Coursedog's most asked about features is the HTML snippet function. In the Website Settings tab within Settings, users have the ability to inject HTML snippets before the page (as a header) or after the page (as a footer):

These snippets work alongside the topbar and footer within the app. 

As a best practice, HTML snippets should be delivered fully standalone. That means, the HTML renders correctly without depending on any external CSS. https://jsfiddle.net/ is a great resource to ensure that this is the case. If the code is pasted into the “HTML” rectangle, and the resulting image looks correct in the “Result” rectangle on the bottom right of the page, the snippet should be good to use.

If CSS rules inside the HTML are also desired (which is possible), users should ensure that all the class names are very unique. As a rule of thumb, prefix all class names with school_code+injected. This should prevent any possible collisions with the website itself.

Example: .dbu-injected-navigation-button

Javascript code embedded within the header is more difficult for our catalog builder to accommodate. While HTML and CSS is oftentimes straightforward, Javascript adds another layer of complexity that could potentially impact the functionality of the catalog as a whole. The feasibility of any given header function that is facilitated by JS— a search bar function that is linked to the entire university website, for example— should be evaluated on a case-by-case basis. If you'd like to include complex functions in your headers— drop-down menus, searches, animations, and beyond— please contact the Coursedog team.

View an example here.

Example Code.



Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.