Установка на сайт и гостевая ссылка

На этой странице описаны три способа подключить Mira для ваших гостей: чат-пузырёк, встроенный в ваш сайт, Guest Link (гостевая ссылка), которой можно делиться, и QR-коды в номерах. Программистом быть не нужно: достаточно вставить одну строку кода на сайт (или передать эту страницу тому, кто занимается вашим сайтом). Код и ссылки вы получаете на странице Widget.

Какой способ выбрать?#

Можно использовать все три способа вместе. Все они подключены к одной и той же Mira и к одной и той же информации.

Пошагово: добавляем виджет на ваш сайт#

Пример: «Blue Bay Hotel» (30 номеров) хочет разместить чат-пузырёк в правом нижнем углу каждой страницы своего сайта.

1. Скопируйте код#

1. Откройте в панели раздел Widget.
2. В блоке Website Widget выберите Position (например, Bottom right) и нажмите Save.
3. Нажмите Copy Code. В буфер обмена будет скопирована строка вроде этой:

<script async src="https://app.airoomier.com/widget.js" data-hotel="blue-bay-hotel"></script>

Значение data-hotel — это идентификатор вашего заведения (часть после /assistant/ в вашей гостевой ссылке). Копируйте код из панели, не набирайте его вручную: адрес и идентификатор должны быть абсолютно точными.

2. Вставьте код на сайт#

Код должен стоять непосредственно перед закрывающим тегом </body> страницы. Если виджет нужен на каждой странице, вставьте код в место, общее для всех страниц (шаблон подвала сайта). Добавляйте код только один раз: если вставить его несколько раз, появится несколько пузырьков.

На вашем собственном HTML-сайте: откройте файл, найдите строку </body> и вставьте код прямо над ней.

WordPress: в общем случае код добавляют в область «footer script», которая выводится на каждой странице сайта. Обычно это делается с помощью плагина «header/footer script» или добавлением кода перед </body> в файле footer.php вашей темы. Если вставить его в блок «Произвольный HTML» внутри страницы, виджет появится только на этой странице. Визуальный редактор может испортить код; используйте режим кода/HTML.

Конструкторы сайтов, такие как Wix, Squarespace, Shopify: во всех есть раздел в настройках сайта с названиями вроде «custom code», «code injection» или «theme code», где можно добавить код в конец страницы (подвал / конец body). Названия меню зависят от платформы и со временем меняются; поищите в справке платформы «custom code» или «code injection». На некоторых платформах эта функция требует платного тарифа. В Shopify код обычно добавляют в файл темы theme.liquid перед </body>.

Если вы работаете с агентством или разработчиком: скажите им: «Добавьте эту строку <script> перед </body> на всех страницах сайта».

3. Опубликуйте и обновите#

Опубликуйте изменение на сайте. Если на сайте есть плагин кеширования или CDN, очистите кеш, затем принудительно обновите страницу (Ctrl+F5 или откройте её в приватной вкладке на телефоне).

4. Проверьте#

1. Откройте сайт в приватном окне/окне инкогнито.
2. Примерно через 1,5 секунды в выбранном углу должны появиться круглый пузырёк Mira (или ваше собственное фото ассистента в Pro) и над ним приветственный пузырёк.
3. Нажмите на пузырёк. На короткое мгновение в центре окна появляются три маленькие точки (индикатор загрузки), затем чат плавно проявляется. При первом открытии появится окно Terms & Conditions; продолжите кнопкой Accept & Continue.
4. Задайте вопросы вроде «Во сколько заезд?» или «Можно ли с животными?». Ответы должны совпадать с тем, что вы указали в Business Info.
5. Откройте сайт и на телефоне: если экран узкий (около 520 пикселей или меньше), чат открывается на весь экран.

5. (Необязательно) Включите защиту домена#

Ваш код открыто виден в исходном коде сайта; если кто-то скопирует его на свой сайт, там будут расходоваться ваш ассистент и ваша квота ИИ-разговоров. Чтобы этого не допустить:

1. Когда виджет заработает на вашем сайте, откройте блок Widget → Domain Security.
2. Введите домен вашего сайта в поле Allowed domains, например bluebayhotel.com (по одному домену в строке; писать https://, путь или www. не нужно, а корневой домен охватывает все свои поддомены).
3. Отметьте Enable domain security и нажмите Save Changes.
4. Снова откройте сайт в приватном окне и нажмите на пузырёк; чат должен открыться как обычно.

Эта настройка доступна на тарифах Basic и Pro. Правила написания, что видит посетитель на заблокированном сайте и на что настройка не влияет, подробно описаны в разделе Domain Security страницы Widget.

Как ведёт себя виджет#

• Пузырёк: круглая иконка 76 пикселей с мягкими «пульсирующими» кольцами. В положениях Right (center) и Left (center) он расположен посередине края экрана по вертикали; в Bottom right и Bottom left — в нижнем углу.
• Приветственный пузырёк: появляется примерно через 1,5 секунды после открытия страницы и показывается один раз за загрузку страницы. Его можно закрыть крестиком ✕; нажатие на него открывает чат. В Pro можно изменить его текст (Widget).
• Окно чата (компьютер): нажатие на пузырёк открывает рядом большое окно. Вы можете изменять размер окна, перетаскивая точечный маркер в его верхнем углу; чтобы закрыть, используйте ✕ в углу окна или снова нажмите на пузырёк. Страница за окном остаётся доступной для прокрутки.
• Окно чата (телефон): если ширина экрана около 520 пикселей или меньше, окно открывается на весь экран, вверху появляется панель Back to site, а пузырёк скрывается. Пока окно открыто, ваш сайт в фоне не прокручивается.
• Чат работает как окно (iframe) внутри вашего сайта; у него собственные стили, и он не нарушает дизайн вашего сайта. Страница чата не загружается, пока окно не будет открыто в первый раз.
• Индикатор загрузки: при открытии окна в его центре показываются три маленькие бронзовые точки, пока чат не будет готов; затем чат появляется с коротким плавным проявлением (без белых или чёрных вспышек экрана). Если по какой-либо причине чат не отправит сигнал «готов», он всё равно будет показан не позднее чем примерно через 1,5 секунды после загрузки страницы. Тот же индикатор появляется и при перезагрузке окна после смены языка.
• Всегда светлая тема: экран чата всегда открывается в светлом оформлении, даже если вы пользуетесь панелью Airoomier в тёмной теме.
• Окно Terms & Conditions: при первом открытии чата гость видит окно с условиями, одинаковое для всех заведений и не изменяемое из панели (о его содержании см. Widget → Guest Link). Accept & Continue запоминается в этом браузере; Decline закрывает окно и позволяет гостю общаться, но в следующий раз окно появится снова.
• Если Domain Security включена и виджет открывают на сайте, которого нет в списке, пузырёк появляется, но в окне вместо чата показывается сообщение «Bu site için yetkilendirilmemiş» («Не авторизовано для этого сайта»).

Параметры кода (параметры data-*)#

Пример (код с жёстко заданным английским языком):

<script async src="https://app.airoomier.com/widget.js" data-hotel="blue-bay-hotel" data-lang="en"></script>

На каком языке открывается виджет?#

Виджет определяет язык в таком порядке:

1. data-lang в коде, если он есть,
2. иначе — язык браузера посетителя,
3. если ни то, ни другое не входит в четыре поддерживаемых языка (турецкий, английский, немецкий, русский), — английский.

Таким образом, виджет на сайте не использует Default Language из Business Info, а использует язык посетителя/вашего сайта. Если ваш сайт на турецком, а браузер посетителя на английском, он увидит английский, пока вы не добавите data-lang="tr". Если на вашем сайте есть переключатель языка, используйте метод setLanguage ниже. Гости всегда могут сами сменить язык с помощью переключателя TR/EN/DE/RU внутри чата.

Управление с помощью JavaScript: AiroomierWidget#

Виджет добавляет на страницу две небольшие команды в window.AiroomierWidget. Их использование необязательно; виджет работает и без них.

Примеры:

<!-- Открыть чат собственной кнопкой -->
<button onclick="window.AiroomierWidget && AiroomierWidget.open()">Talk to Mira</button>

<script>
  // Когда переключатель языка вашего сайта меняется, обновите и язык виджета
  function siteLanguageChanged(code) {
    if (window.AiroomierWidget) AiroomierWidget.setLanguage(code);
  }
</script>

Что нужно знать:

• Поскольку код загружается с async, сразу после открытия страницы AiroomierWidget может ненадолго оказаться не определён. Проверяйте через window.AiroomierWidget &&, как показано выше.
• setLanguage сразу обновляет язык отображаемого приветственного пузырька и подписей окна. Если окно чата закрыто, при следующем открытии оно перезагрузится на новом языке; если окно открыто, текущий разговор не затрагивается.
• Отдельной команды для закрытия окна нет; посетитель закрывает его с помощью ✕, Back to site или пузырька.

Пошагово: делимся гостевой ссылкой#

Guest Link — это постоянный, неизменный адрес вашего заведения (https://app.airoomier.com/assistant/blue-bay-hotel). Любой, кто может открыть ссылку, может напрямую общаться с Mira; сайт не нужен.

1. Перейдите в блок Widget → Guest Link.
2. Нажмите на ссылку правой кнопкой мыши (на телефоне — долгое нажатие) и скопируйте адрес ссылки.
3. Вставьте её туда, где вам удобно:

Пример сообщения: «Здравствуйте! Нашему цифровому администратору Mira можно написать в любое время здесь: https://app.airoomier.com/assistant/blue-bay-hotel».

Добавляем язык в ссылку#

Выбрать язык, на котором откроется чат, можно, добавив ?lang= в конец ссылки (tr, en, de, ru). Пример для аккаунта в Instagram, рассчитанного на иностранных гостей: https://app.airoomier.com/assistant/blue-bay-hotel?lang=en. Если язык не добавлен, чат открывается на Default Language вашего заведения; гости могут сменить его переключателем TR/EN/DE/RU в чате.

Пошагово: QR-код номера#

QR-код номера автоматически сообщает Mira, из какого номера пишет гость. Гостю не нужно называть номер комнаты.

1. Откройте Room Types и перейдите к списку Physical Units на карточке нужного типа размещения. См. Room Types.
2. На карточке нужного номера (например, 101) нажмите Edit.
3. В нижней части открывшегося раздела нажмите кнопку Room Link & QR.
4. Откроется окно Room Link — 101: в нём QR-код, адрес ссылки, кнопки Copy Link и Download QR (PNG), а также кнопка Close. QR-код создаётся в вашем браузере (ничего не отправляется во внешний сервис).
5. Скачайте QR-код и распечатайте его на карточке номера или на двери (имя файла выглядит как oda-101-qr.png).

Когда гость сканирует QR-код, чат привязывается к этому номеру, а в шапке чата появляется метка вроде Room 101. Что это даёт:

• Mira сообщает этому гостю пароль Wi-Fi (пароль показывается только проживающим гостям; см. Business Info).
• Заявки, которые гость оставляет через Mira (например, полотенца или уборка; только для типов, которые вы включили в Request Types), автоматически привязываются к этому номеру; см. Заявки гостей. Без QR-кода/ссылки запрос можно открыть, только если у гостя есть подтверждённое бронирование на сегодня с назначенной единицей.
• Если гость позже снова откроет тот же QR-код, он увидит количество своих открытых заявок по этому номеру.

Пошагово: добавляем на телефон как приложение#

Гости могут добавить Mira на главный экран телефона как приложение, открыв Guest Link. Вам ничего настраивать не нужно; эта функция включена автоматически.

1. Гость открывает Guest Link на телефоне (через ярлык/QR/SMS).
2. В правом верхнем углу экрана чата он видит кнопку Install App (на узком экране показан только значок телефона).
3. Android / Chrome: он нажимает кнопку и подтверждает появившееся окно установки; ярлык добавляется на главный экран.
4. iPhone / Safari: он нажимает кнопку. В появившемся окне перечислены такие шаги: (1) нажать значок Share на панели инструментов, (2) нажать Add to Home Screen, (3) нажать Add в правом верхнем углу. После этого окно закрывается кнопкой Got it.

Установленный ярлык открывается на весь экран и ведёт прямо в чат вашего заведения. Его название — имя ассистента (по умолчанию «Mira»; в Pro — имя и фото, которые вы задали). Приложение не использует кеш: чат, наличие мест и цены всегда актуальны, а без интернета оно не работает. Ярлык открывает чат на вашем Default Language, как и Guest Link. Если приложение уже установлено или браузер не поддерживает установку, кнопка Install App не отображается.

Что дальше#

• Каждый чат, поступивший через виджет или ссылку, отображается на странице Conversations; см. Разговоры. Эти чаты учитываются в вашей ежемесячной квоте ИИ-разговоров (Basic: 100 в месяц, Pro: 1000 в месяц; см. Аккаунт и тарифы). Когда квота исчерпана, гость видит «We're quite busy right now...» и кнопки Call Us / WhatsApp / Send an Email.
• Если гость просит забронировать, запрос попадает в Bookings; см. Бронирования.
• Настройки, которые вы меняете в панели (положение, текст пузырька, имя/фото ассистента), доходят до вашего сайта без изменения кода — не более чем примерно за 1 минуту.

Устранение неполадок#

Советы и частые ошибки#

• Сначала Live Preview: опробуйте ассистента в Live Preview на странице Widget, прежде чем добавлять его на сайт.
• Не правьте код вручную: положение и тексты меняйте в панели; сам код никогда не меняется.
• Не сокращайте и не меняйте Guest Link: если идентификатор заведения в конце ссылки изменится, чат не откроется.
• Проверьте на телефоне: большинство ваших гостей пользуются телефонами; хотя бы раз попробуйте открытие на весь экран и панель Back to site.
• Заполняйте пробелы: если на какой-то вопрос Mira отвечает «I have no information», добавьте информацию в Knowledge Base или Facilities.