Skip to main content
Use this pattern when you want precise placement in your navbar or mobile menu instead of a single page-level container.

​
How navbar placement works

Webless renders the search button exactly where you place the container element. Use separate containers for desktop and mobile so each viewport can have its own layout.

Add the desktop container

Place the desktop container exactly where you want the desktop search button to appear.
<div id="webless-homepage-tag-desktop"></div>
Common placements include the right side of the header, a navigation list, or a dedicated actions area.

Add the mobile container

Place the mobile container where you want the mobile or tablet trigger to appear.
<div id="webless-homepage-tag-mobile"></div>
Common placements include a hamburger menu, a mobile actions row, or the top of the mobile navigation drawer.

Load the shared Webless script

Add the hosted script once, before the closing </body> tag.
<script src="https://store.webless.ai/YOUR_COMPANY/tags/prod/YOUR_COMPANY.js"></script>

Verify both entry points

Confirm all of the following after deployment:
  • The hosted script loads without errors
  • Both container elements exist
  • The desktop button appears in desktop viewports
  • The mobile button appears in mobile or tablet viewports
  • Both buttons open the Webless experience

​
Placement examples

Desktop header placement
<header class="header">
  <div class="header__right">
    <div id="webless-homepage-tag-desktop"></div>
    <ul class="header__nav">
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>
</header>
Mobile menu placement
<nav class="nav">
  <div class="mobile">
    <div id="webless-homepage-tag-mobile"></div>
    <ul class="nav__right">
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>
</nav>

​
Full example

<body>
  <header>
    <div id="webless-homepage-tag-desktop"></div>
  </header>

  <nav>
    <div id="webless-homepage-tag-mobile"></div>
  </nav>

  <!-- Your page content -->

  <script src="https://store.webless.ai/YOUR_COMPANY/tags/prod/YOUR_COMPANY.js"></script>
</body>
Yes. The button renders exactly where the container sits in the DOM, so place each container where it best fits your design.
Yes. If you only want a desktop or mobile entry point, install only the relevant container. Just make sure the remaining entry point still matches your responsive layout.
Remove the containers and the script from the templates where Webless should not render.