This is your guide for coding custom headers to use with Events+. This article covers supported elements, key information for coding custom headers, and sample code.
If you’re unfamiliar with it, Events+ is a centralized hub that lets you promote and share your past event content and future events in one place. You can further customize their look and feel by using custom headers in your Event+ hub.
To access this feature, reach out to your Cvent account team.
Supported Elements
This section describes the page elements you can use for custom headers.
HTML Elements
You can use a variety of HTML elements, including html, head, body, div, nav, header, h1, h2, h3, h4, h5, h6, p, a, svg, path, ul, li, ol, button, blockquote, b, i, font, s, u, o, sup, sub, ins, del, strong, strike, tt, code, big, small, br, span, em.
Attributes
You’re allowed to use many attributes: id, class, aria-expanded, aria-labelledby, aria-haspopup, aria-label, role, title, tabindex, type, d.
Some elements, like <a> and <svg>, have their own set of allowed attributes.
- For <a> elements, allow attributes href, target, rel.
- For <svg> elements, allow attributes viewBox, path.
Fonts
Cvent supports external fonts. See code samples for an example of importing fonts to your site.
JavaScript
Cvent supports JavaScript in creating a custom header. But remember, no other applications of JavaScript are supported.
Breakpoints
The desktop view begins at 1079px and above. The mobile view is shown below 1079px.
Unsupported Elements
This section describes page elements that are not supported through custom headers. Any unsupported tags and attributes are automatically removed when you preview or publish the site.
Frameworks
Cvent doesn’t officially support any framework.
Comments
HTML, CSS, and JS components do not support comments. Remove comments from your code.
Testing
This section outlines any important considerations when testing your custom headers.
- Links: Links will not work in preview mode on the planner side.
Sample Code
This section contains sample code for your reference when working with Events+ custom headers.
Sample Header Code
The following files contain sample code for your Custom Header HTML, CSS, and Scripts. This sample code is meant as an example. Customize before use.
Importing Fonts
You can import fonts to use in your custom Events+ header. Its possible to import font resources from other domains, as long as those resources are not domain restricted. To avoid domain restriction issues, Cvent recommends importing fonts into Cvent Admin. To add fonts to Cvent Admin, import custom fonts to your Cvent account. When you create your Events+ hub, add the custom font to your site’s branding.
Once a font has been imported to Cvent and added to your page’s branding, you can bring these fonts into your custom header. The following code blocks show an example of this.
Custom Header CSS
#id2 {
font-family: 'Tangerine','Rubik','Helvetica','Arial';
}
Custom Scripts (Javascript)
var styleElement = document.createElement('style');
styleElement.textContent = `
@font-face {
font-family: Tangerine;
src: url(https://example.fonts.url) format('format goes here');
}
`;
document.head.appendChild(styleElement);
Shadow Selectors
The custom header uses shadow components. You can use a script like the following to access custom header elements using shadow selectors in JavaScript.
document.querySelector('#custom-header').shadowRoot.getElementById('dropdown-content')
Custom Header Events
The following JavaScript code sample shows how to create a custom header event.
document.querySelector('#custom-header').shadowRoot.getElementById("top-nav-responsive").addEventListener('click', function () {
var x = document.querySelector('#custom-header').shadowRoot.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
});
Analytics
For analytics tracking using JavaScript, Cvent recommends using Code Snippets.