Embed Search on Your Website

Prerequisites

You need access to the website template or its administrator, the correct store selected in the account, and an uploaded catalogue. For Bitrix, complete module installation first. On another website, open “Settings” and locate “Integration keys” and “Widget for your website”. Only the public key belongs in browser code; never insert an integration key or server token there.

Check whether Anmarto already loads through the template, a tag manager or the module settings. The legacy /s/WIDGET_CODE.js code and the current /widget/anmarto-widget.js loader are not interchangeable.

Bitrix: Search in the Header

1. Open the installed abr.search module settings in Bitrix administration.
2. For automatic insertion, use “embed automatically, without editing the template” and “insert into a layout block”.
3. In “Block:”, specify a dedicated search wrapper, such as #site-search. “Pick on the site” helps select its CSS selector.
4. Do not select the entire header: the widget covers the selected block's contents, including its existing input and button.
5. Set “Results page” to /search/ only after creating that page. An empty value opens full results over the current page.

A mobile theme may use a different header. Check that the selector finds the intended position there too. Keep a working fallback until the new search bar has been checked.

Bitrix: A Dedicated Results Page

Create /search/index.php using the normal website editing process. This example uses the standard Bitrix header and footer:

<?php
require($_SERVER['DOCUMENT_ROOT'].'/bitrix/header.php');
$APPLICATION->SetTitle('Search');
$APPLICATION->IncludeComponent(
    'abr:search.page',
    '',
    ['MOUNT_ID' => 'anmarto-results', 'SET_TITLE' => 'Y']
);
require($_SERVER['DOCUMENT_ROOT'].'/bitrix/footer.php');

The component creates its container and connects results; do not add a duplicate loader manually. It reads q or searchText from the URL. SET_TITLE allows the query to set the page title, and MOUNT_ID must be unique on the page. The component does not start another chat.

If the theme restricts width, adjust the outer page wrapper rather than card internals:

.search-page-container { width: 100%; min-width: 0; }
#anmarto-results { width: 100%; min-width: 0; }

The first selector is illustrative: assign that class to your own wrapper. The component does not create it automatically.

Other Websites: The Current Widget

1. In “Settings → Widget for the site”, copy the generated code with your service address.
2. Prepare an empty <div id="site-search"></div> in the header.
3. Add data-search-mount="#site-search" to the single loader and place it before </body>.
4. If required, add data-results-url="/search/". On the results page you create, use data-search-page="#search-results" and the matching container.
5. For search without the consultant, use data-consultant="false". Check cart integration separately.

Verification and Failures

Enter the exact name of a known product, press Enter, then open a filter and a product card. Repeat on a phone. A URL such as /search/?q=sealant should restore the query. This is an example, not a promise that your catalogue contains sealant.

If the component says search is not connected, check module connection and its key. Empty results with a working input require a catalogue check. Two search bars or chat buttons usually mean duplicate integration. If the whole header disappears, narrow the container selector. Never substitute a secret key to resolve a display problem.

Continue with appearance, cart, connection verification or all articles.