Create a custom launch icon

Monocle includes a search button. Use a custom launcher when the default button does not match your site.

The starter code below adds a fixed search button to the bottom right of your site. The button uses the JavaScript API to open the standard Monocle search interface:

window.Monocle.showSearch()

Where to put the code

On Squarespace, paste the full snippet into Settings → Developer Tools → Code Injection → Footer.

If the built-in Monocle launcher is already active, turn it off in the Monocle design editor first. Otherwise your site will show both launchers.

Starter code

<style>
  :root {
    --mnc-launcher-background: #111827;
    --mnc-launcher-color: #ffffff;
    --mnc-launcher-offset: 1.25rem;
    --mnc-launcher-radius: 999px;
  }

  .mnc-custom-launcher {
    position: fixed;
    right: var(--mnc-launcher-offset);
    bottom: var(--mnc-launcher-offset);
    z-index: 2147483000;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0 1.15rem 0 0.95rem;
    border: 0;
    border-radius: var(--mnc-launcher-radius);
    background: var(--mnc-launcher-background);
    color: var(--mnc-launcher-color);
    font:
      700 1rem/1.1 system-ui,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      sans-serif;
    box-shadow: 0 12px 28px rgb(17 24 39 / 24%);
    cursor: pointer;
    transition:
      background-color 160ms ease,
      box-shadow 160ms ease,
      transform 160ms ease;
  }

  .mnc-custom-launcher:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgb(17 24 39 / 30%);
  }

  .mnc-custom-launcher:focus-visible {
    outline: 3px solid #facc15;
    outline-offset: 3px;
  }

  .mnc-custom-launcher svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
  }

  @media (max-width: 640px) {
    .mnc-custom-launcher {
      right: 1rem;
      bottom: 1rem;
      min-height: 2.75rem;
      padding-right: 1rem;
    }
  }
</style>

<script>
  var monocleLauncherId = 'mnc-custom-search-launcher'

  function openMonocleSearch() {
    if (window.Monocle && typeof window.Monocle.showSearch === 'function') {
      window.Monocle.showSearch()
      return
    }

    console.warn('Monocle Search is not ready yet.')
  }

  function addMonocleLauncher() {
    if (document.getElementById(monocleLauncherId)) return

    document.body.insertAdjacentHTML(
      'beforeend',
      `
        <button
          id="mnc-custom-search-launcher"
          class="mnc-custom-launcher"
          type="button"
          aria-label="Open site search"
        >
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path
              d="m20 20-4.2-4.2m1.2-5.3a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
          <span>Search</span>
        </button>
      `,
    )

    document
      .getElementById(monocleLauncherId)
      .addEventListener('click', openMonocleSearch)
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', addMonocleLauncher)
  } else {
    addMonocleLauncher()
  }
</script>

What to change

Start with the variables at the top of the snippet:

• Change --mnc-launcher-background and --mnc-launcher-color to match your site.
• Change the Search text inside the button.
• Replace the SVG if you want a different icon.
• Adjust --mnc-launcher-offset if your site already has a chat widget, cookie banner, or another fixed button in the bottom right corner.

Keep the openMonocleSearch function and its call to window.Monocle.showSearch(). The button uses this call to open the Monocle search interface.