Custom Headers and Footers for OneMob Microsites

  • Updated

This one's already well-organized — mostly polish here: fixed code block language tags (they were labeled auto, which won't trigger syntax highlighting), tightened some redundant phrasing, and reorganized a couple of sections for better flow.

 

Custom Headers and Footers (Enterprise)

OneMob Enterprise customers can add custom headers and footers to their microsites using externally hosted JavaScript. This enables consistent branding, navigation, and layout across every microsite in your OneMob instance.

Who Can Use This Feature?

Plan Available
Enterprise ✅ Yes
All other plans ❌ No

This feature must be enabled by the OneMob team — it cannot be turned on directly by users.

 

How to Enable Custom Headers and Footers

  1. Create your external JavaScript file(s). They must be:
    • Publicly accessible
    • Served over HTTPS
    • Self-contained — including all logic to render both the header and footer
  2. Send your script URL(s) to OneMob Support at support@onemob.com.
  3. OneMob enables the feature. Once enabled, your script(s) will load on every microsite in your instance.

Note — Global Behavior: The custom header and footer apply instance-wide. All microsites will display the same header and footer, and this cannot be configured per individual microsite. To make changes later, update your external script directly — no additional configuration is needed on OneMob's end.

 

How the Integration Works

OneMob renders empty container elements on each microsite and loads your externally hosted JavaScript. Your script is responsible for injecting and managing all header and footer content.

Header container:

<div id="header" class="header"></div>

Footer container:

<div id="footer" class="footer"></div>

Script field:

<script src="https://your-domain.com/path/to/script.js"></script>
  • Multiple <script> tags are supported if needed.
  • Inline JavaScript is not supported.

Expected behavior:

  • The header and footer containers render empty by default.
  • Provided scripts load as standard HTML <script> tags.
  • Your script must locate the containers, inject all HTML/styles/interactivity, and handle all rendering logic.

 

Responsibilities

OneMob You (Customer)
Renders the header and footer containers Injects all header and footer content
Loads the external scripts you provide Manages styling, layout, and interactivity
Does not modify, interpret, or validate your script content Handles errors and edge cases in your script

 

Script Delivery Requirements

Supported:

  • Externally hosted scripts
  • Publicly accessible, served over HTTPS
  • Included only via <script src="...">

Not supported:

  • Inline JavaScript
  • Embedded script content
  • Platform-side script validation or modification

 

Example Script

document.addEventListener("DOMContentLoaded", () => {
  const header = document.getElementById("header");
  const footer = document.getElementById("footer");

  if (header) {
    header.innerHTML = `
      <nav>
        <img src="/logo.png" alt="Company Logo" />
        <a href="/home">Home</a>
        <a href="/contact">Contact</a>
      </nav>
    `;
  }

  if (footer) {
    footer.innerHTML = `
      <footer>
        <p>© 2026 Your Company. All rights reserved.</p>
      </footer>
    `;
  }
});

Best Practices

  • Check that the header and footer containers exist before injecting content.

Related articles