Custom Headers and Footers for OneMob Microsites

  • Updated

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

graphical user interface, application, website

Who Can Use This Feature?

  • ✅ OneMob Enterprise customers only

  • ❌ Not available on non-Enterprise plans

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

How to Enable Custom Headers and Footers

To enable this feature, you’ll need to provide your script details to OneMob Support.

Steps

  1. Create your external JavaScript file(s)

    • Must be publicly accessible

    • Must be served over HTTPS

    • Must include all logic to render both the header and footer

  2. Email your script information to OneMob

  3. OneMob enables the feature

    • Once enabled, the scripts will be loaded on all microsites in your instance

Important: Global Behavior

After the feature is enabled:

  • The custom header and footer apply globally

  • All microsites in your OneMob instance will display the same header and footer

  • The feature cannot be configured per individual microsite

Any updates should be made by modifying your external script—no additional OneMob configuration is required.

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.

Available Fields

The integration includes three independent fields:

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

  • Header and footer containers render empty by default

  • Provided scripts are loaded as standard HTML <script> tags

  • Scripts must:

    • Locate the header and footer containers

    • Inject all HTML, styles, and interactivity

    • Handle all rendering logic

Responsibilities

OneMob Responsibilities

  • Render the header and footer containers

  • Load the external scripts provided

OneMob does not modify, interpret, or validate your script content.

Customer Responsibilities

  • Inject all header and footer content

  • Manage styling, layout, and interactivity

  • Handle errors and edge cases in your script

Script Delivery Requirements

Supported

  • Externally hosted scripts

  • Publicly accessible

  • Served over HTTPS

  • Included only via <script src="..."></script>

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 header and footer containers exist before injecting content

  • Use a reliable domain or CDN for hosting scripts

  • Keep scripts lightweight to optimize page load times

  • Test your script in a standalone HTML page before submitting it to OneMob

Need Help?

To enable, modify, or disable custom headers and footers, contact:

support@onemob.com

Related articles