Необходимые условия
- Для веб-виджета необходим минимальный тариф Про
- Включенная фича Чаты (chats)
- Сервер с Swarmica должен быть доступен извне по доменному имени и протоколу HTTPS
Создание канала
Для того, чтобы различать веб-приложения (сайты), куда встроен виджет и иметь возможность выполнять разные настройки для разных приложений, следует создавать отдельные каналы типа "Виджет" в Swarmica.
Для создания канала Виджета, зайдите в Настройки > Каналы > Виджеты:
Нажмите Создать и введите название, например "Виджет на основном сайте" - это название будет отображаться в списках заявок, экспортах данных и т.д.
Выберите тип авторизации:
- Аноним - не будет требовать никакой авторизации.
- OTP код - используется, если вы интегрируете виджет в свое приложение и хотите пробрасывать авторизацию из него.
- Email - пускает только тех пользователей, которые зарегистрированы в Swarmica.
Переключите бегунок Включен и нажмите Сохранить.
Теперь виджет готов к встраиванию.
Встраивание виджета
Чтобы встроить виджет в приложение, добавьте код, отображаемый в правой панели в HTML код сайта или приложения, куда вы хотите встроить виджет. Для того, чтобы скорость загрузки приложения была оптимальна, разместите код ближе к закрывающему тегу </body>
Пример кода встраивания:
<!-- start embedded Swarmica Chat script -->
<iframe src="https://tool.swarmica.com/widgets/index.html?id=tHf5NcVly6D7ztm-" id="tHf5NcVly6D7ztm-" style="position: fixed; right: 12px; bottom: 12px; width: 56px; height: 56px; overflow: hidden; "
allowTransparency="true"
frameborder="0"
allowTransparency="true" frameborder="0"></iframe>
<script src="https://tool.swarmica.com/widgets/render.js"></script>
<script>
const iframe = document.getElementById("tHf5NcVly6D7ztm-")
iframe.onload = () => {
renderWidget("tHf5NcVly6D7ztm-")
}
</script>
<!-- end embedded Swarmica Chat scripts -->
Также, можно указать параметр локализации виджета, для этого нужно передать параметр locale=ru или locale=en:
<iframe src="https://tool.swarmica.com/widgets/index.html?id=tHf5NcVly6D7ztm-&locale=ru" ...
См. также дополнительные параметры виджета