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.

• Download Sample Header

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.