Engage

Compass Search

Install the on-site search widget, configure branding, placeholders, and hotkeys.

Verification unlock: This feature is available for verified websites. Verify your site now so Compass Search can index the right pages and stay reliable for visitors. Start here: Brands, Domains & Verification.

Compass Search lets visitors quickly find pages and content on your site using the pages The Credibility Compass has indexed from your scans.

This page focuses on what users need to do to turn it on, connect it to the right brand, and match it to their own visual style.

What Visitors See

When Compass Search is enabled:

A small floating search button appears on your site.
A “command palette” style search box opens when visitors:
Click the floating button, or
Use a keyboard shortcut (by default Ctrl+K / ⌘K).
Typing in the box shows matching pages (title, path, short snippet).

You choose which brand it belongs to and how it looks; The Credibility Compass takes care of the search logic.

Step 1 – Get Your Brand Token

Compass Search uses your brand's verification token to know which site to search.

To find it:

Go to your brand in The Credibility Compass.
Open Brand Settings (or the verification / tracking section).
Look for the verification token (the same value used for your tracking script).

You’ll use this value as data-site-id in the embed snippet.

Step 2 – Enable the Search Widget on Your Site

Add this <script> tag to your site (for example in your main layout or template) so the floating search widget is available:

<script
  src="https://cdn.jsdelivr.net/gh/scasper1/cc-site-client@latest/cc-site-client.min.js"
  data-site-id="YOUR_BRAND_TOKEN"
  data-search-enabled="true"
  data-search-placeholder="Search our site"
  data-search-accent="#ec4899"
  async
></script>

Replace:

YOUR_BRAND_TOKEN with your actual verification token.

Once this is deployed:

The floating search button should appear.
The Ctrl+K / ⌘K shortcut should open the search panel.

Step 3 – Match the Accent Color to Your Brand

Compass Search uses an accent color for result titles and highlights.

To customize it:

Set data-search-accent to any valid CSS color value, for example:
A hex color: #ec4899 (pink).
Another brand color like #1d4ed8 (blue).

Example:

data-search-accent="#1d4ed8"

Pick a color that:

Fits your primary or secondary brand palette.
Has enough contrast against white backgrounds so links are readable.

Optional – Adjust Placeholder and Hotkey

You can personalize the text and keyboard shortcut:

data-search-placeholder – The hint text inside the search box.
e.g., "Search articles, guides, and FAQs".
data-search-hotkey – The keyboard shortcut visitors can use.
e.g., "Ctrl+K" (default) or "Ctrl+/".

Example with a custom placeholder:

data-search-placeholder="Search docs and guides"

If you’d rather not show the search widget at all, set:

data-search-enabled="false"

When Search Results Might Be Empty

Compass Search uses pages that have already been scanned for your brand.

You may see few or no results if:

You haven’t run many page scans yet.
The pages you expect to see belong to a different brand in The Credibility Compass.

To improve coverage:

Run scans on your most important pages (home, pricing, docs, key content).
Re-scan sections after major site updates.
After publishing content edits, run a fresh scan so search reflects the latest page version.

Keeping Search Results Fresh

Compass Search freshness depends on scan freshness.

If you update copy, headings, offers, or page structure, re-scan those pages.
Treat scans as your index refresh cycle in CC.
For actively changing sites, schedule periodic rescans of key pages (homepage, pricing, product pages, docs, FAQs).

Quick Checklist

To get Compass Search working and on-brand:

[ ] Brand is created and verified in The Credibility Compass.
[ ] You know your verification token for that brand.
[ ] The embed <script> is added to your site with data-site-id set.
[ ] data-search-enabled="true" is set where you want search available.
[ ] data-search-accent uses one of your brand colors.
[ ] You’ve run scans on the pages you want to appear in search.

For deeper API-level details (for example, building your own custom search UI), see the Compass Search developer document under Developer Docs.