Create a custom launch icon

Monocle can show a ready-made search button on your website for you, but sometimes a site needs a button that follows its own brand more closely and our default button won't do.

On this page we show you how you can easily add a button of your own making.

The starter code below adds a fixed search button to the bottom right corner of your site. It opens the same floating search interface as the standard Monocle launcher, but it does so using the JavaScript API:

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

The easiest changes are 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.

The important part is the openMonocleSearch function. Keep the call to window.Monocle.showSearch() and the button will open the Monocle search interface.