Cavai Docs

Appearance

Cavai-Anywhere Showcase Pages ​

Overview ​

Cavai-Anywhere is a static site hosted on Cloudflare Pages that serves as a creative showcase/demo platform. It lives at campaign.site and is backed by the Cavai-Anywhere GitHub repo.

Repo: ~/CavaiProduct/Cavai-AnywhereRemote: https://github.com/Cavai/Cavai-Anywhere.gitDeploy: Automatic on push to main via Cloudflare Pages (takes ~1-2 minutes).

URL Structure ​

campaign.site/{client}/{page}  -->  ad/{client}/{page}.html

Example: campaign.site/TravelSpike/conversationalvideo serves ad/TravelSpike/conversationalvideo.html.

How to Create a New Showcase Page ​

1. Find the creative tags ​

Each creative needs a data-creative-id and a stub_file URL. Two ways to get these:

  • From existing Cavai-Anywhere files in ad/ (grep for the creative ID)
  • From the Cavai MCP tool:
    • cavai_search to find creatives by name
    • cavai_get_creative to get the stub URL from stub_file
    • cavai_get_creative_tag to get the ready-to-use embed snippet
    • cavai_list_creatives_in_group to list all creatives in a group

2. Copy the template ​

All pages use the same HTML template. Copy any existing page (e.g. TMobile.html) as a starting point. The template includes:

  • TravelSpike logo (top-left)
  • Zoom controls (top-right)
  • #iframe-container with creative divs
  • Tab bar (auto-generated from div IDs)

3. Add creatives as tabs ​

Inside #iframe-container, add one <div> per creative. The id attribute becomes the tab label:

html
<div id="iframe-container">
  <div id="Hawaii">
    <script
      data-creative-id='51315-51824-52453-73194'
      data-timestamp='2025-02-21T14:10:55.423Z'
    >
    (function() {
      var s   = document.createElement('script');
      s.src   = 'https://delivery-3.cavai.com/assets/creatives/73194/cm34t749v066qkqj4amlz882s/built/assets/stub.js?bust='+Date.now();
      s.async = true;
      s.setAttribute('data-click-macro', 'MACRO_PLACEHOLDER');
      s.setAttribute('data-domain', 'DOMAIN_PLACEHOLDER');
      s.setAttribute('data-dsp', 'DSP_PLACEHOLDER');
      document.head.appendChild(s);
    })();
    </script>
  </div>
  <div id="AXA">
    <!-- next creative tag here -->
  </div>
</div>

The JS at the bottom of the template automatically:

  • Reads all child divs of #iframe-container
  • Creates a tab button for each using the div's id as the label
  • Shows/hides creatives when tabs are clicked

4. Commit and push ​

bash
cd ~/CavaiProduct/Cavai-Anywhere
git add ad/{client}/{page}.html
git commit -m "add {page} page for {client}"
git push

Cloudflare Pages deploys automatically. Link is live within 1-2 minutes.

Common Pitfalls ​

  • Swapped creatives: Always verify creative names in the platform match what you expect. Files in the repo have had creatives mislabeled (e.g. Wyoming creatives in WestVirginia.html and vice versa). Use cavai_get_creative or cavai_search to confirm creative names.
  • Format mismatch: Check creativeProperties.format in the creative blob to verify dimensions (640x360, 300x600, etc.). Tracy/sales may request specific formats for showcase links.
  • DSP macros: For showcase/demo pages, use MACRO_PLACEHOLDER, DOMAIN_PLACEHOLDER, DSP_PLACEHOLDER. Only use real DSP macros (e.g. ${CLICK_URL}, XAN) if the creative is actually being served through that DSP.

Existing Client Directories ​

  • ad/TravelSpike/ (101+ pages)
  • ad/Alkimi/
  • ad/TravelSpike/Finland/
  • ad/axa/
  • ad/bmw/
  • ad/fever/
  • And more (see ad/ directory)

Not the Same As ​

Preview whitelabeling (preview.ad-delivery.com) is a URL alias for my.cavai.com/creatives/{id} preview links. It shows a single creative in the platform's preview frame. Cavai-Anywhere is a separate system with custom branding, multi-tab support, and zoom controls.

Internal documentation

Cavai