Docs Custom Chrome

Custom Chrome

Brand every generated page with your site's header, footer, and CSS.

What Is Chrome?

Chrome is the branding wrapper around every pSEO page. It consists of three parts:

Header HTML — Your site's navigation bar, logo, and any top-of-page elements
Footer HTML — Footer links, copyright notice, social icons, and any bottom-of-page elements
Custom CSS — Styles for your chrome elements, scoped to avoid conflicts with generated content

Chrome is configured per-project. Each project can point at different header / footer / CSS files, so you can run multiple brands or sites from a single CLI install.

How Pages Render

When a visitor requests a pSEO page, Contento assembles the final HTML in this order:

<!-- 1. HTML document head -->
<!DOCTYPE html>
<html>
<head>
  <title>{deterministic title}</title>
  <meta name="description" content="{meta description}">
  <style>{project custom CSS}</style>
  {JSON-LD structured data}
</head>
<body>

  <!-- 2. Your header chrome -->
  {project headerHtml}

  <!-- 3. Generated content -->
  <main class="pseo-content">
    {rendered schema content}
    {back-link}
    {CTA HTML}
  </main>

  <!-- 4. Your footer chrome -->
  {project footerHtml}

</body>
</html>

Configuring Chrome

Point Contento at your existing site's header, footer, and CSS files using the projects chrome command. The paths are stored in your project config and read fresh on every build — edit your templates in place and rebuild to apply changes.

$ contento projects chrome proj_8f3a... \
    --header ./chrome/header.html \
    --footer ./chrome/footer.html \
    --css ./chrome/styles.css

  ✓ Chrome updated for project "DevTools Resources"
  Changes are live immediately on all pages.

Or pass inline HTML directly:

$ contento projects chrome proj_8f3a... \
    --header-inline '<nav><a href="https://example.com">Home</a></nav>' \
    --footer-inline '<footer>&copy; 2026 Example Inc</footer>'

Back-link Configuration

Back-links are contextual links to your main site injected into the generated content body. They are configured at the project level (not in chrome):

Back-link URL — The destination (e.g., https://example.com)
Back-link Anchor Text — The visible link text (e.g., "Example Inc" or "Try our tool")

The back-link is placed contextually within the generated content, typically after the introduction paragraph. It uses a rel="dofollow" attribute for SEO value.

CTA HTML Injection

The CTA (Call to Action) HTML is a raw HTML snippet injected at strategic points within the generated content. Unlike the header/footer chrome which wraps the page, the CTA is placed inside the content area:

After the introduction (if the page has 5+ items)
After the midpoint of the content
Before the conclusion

Example CTA HTML:

<div class="pseo-cta">
  <p>Ready to streamline your workflow?</p>
  <a href="https://example.com/signup" class="cta-button">Start Free Trial</a>
</div>

Style your CTA in the project's custom CSS:

.pseo-cta {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f0f5ff;
    border-radius: 8px;
    text-align: center;
}
.pseo-cta .cta-button {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.75rem 2rem;
    background: #3D5A80;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

Example: Copying Your Site's Header & Footer

The easiest way to create chrome is to copy your existing site's header and footer HTML:

Open your main site in a browser.
Right-click the header and choose Inspect.
Find the <header> or <nav> element and copy its outer HTML.
Do the same for the <footer> element.
Save each to a file (e.g., header.html, footer.html).
Copy the relevant CSS rules from your site's stylesheet into a styles.css file.
Update any relative URLs (e.g., /images/logo.svg) to absolute URLs (e.g., https://example.com/images/logo.svg).
Upload with the CLI: contento projects chrome proj_... --header ./header.html --footer ./footer.html --css ./styles.css

Important: Make sure all asset URLs (images, fonts, icons) in your chrome HTML use correct paths relative to your site's structure. Since pages are built locally and deployed on your domain, relative paths work as long as they resolve correctly from your output directory.

CSS Considerations

Scope your styles — Use a prefix like .site-header or .site-footer to avoid conflicts with the generated content's default styles.
Avoid global resets — Do not include CSS resets (like * { margin: 0; }) in your custom CSS, as they will affect the generated content layout.
Responsive design — Generated content is responsive by default. Ensure your chrome is also responsive for mobile devices.
Font loading — If your chrome uses custom fonts, include the @import or <link> tag in the header HTML (not the CSS field).
z-index — Generated content uses z-index values up to 100. Keep your chrome's z-index below 1000 unless you need a sticky header.

Preview & Testing

After uploading chrome, you can preview it in two ways:

Local preview — Run contento build <project-id> --output ./dist and open any generated HTML file in your browser to preview chrome rendering.
Live page — After deploying to your site, navigate to any generated page on your domain to verify chrome rendering.

Tip: If your chrome looks correct in the preview but not on the live site, check for CSS specificity conflicts between your custom CSS and the generated content's base styles.