Аптека «Здоровье»

Демонстрационная страница: имитирует сайт аптеки с чужими и конфликтующими стилями.

Как подключён виджет

Ровно одна строка в конце страницы — больше от владельца сайта ничего не требуется. Стили выше намеренно грубые: они проверяют, что виджет живёт в изолированном Shadow DOM и не наследует чужую вёрстку.

<script src="/farma-widget.js" defer></script>

Атрибуты необязательны: api-base (по умолчанию — свой origin), title, placeholder, greeting, open, history-limit, data-theme="dark".

<farma-assistant
  title="Подбор средства"
  placeholder="Опишите, что беспокоит…">
</farma-assistant>

Адрес API здесь не указан намеренно: виджет обращается к своему origin, и на удалённом стенде это работает без правок. Атрибут api-base нужен только если API живёт на другом домене.

Что проверить вручную

Другой способ управления

Кнопка ниже — часть «сайта», а не виджета. Она управляет виджетом из обычного JavaScript и оформлена чужими стилями: так проверяется, что публичный API доступен, а стили не пересекаются.