Введение в Concierge CRM
Основные настройки CRM
Установка и настройка виджета

Установка и настройка виджета

Для инициализации виджета Concierge Online на сайте необходимо добавить перед закрывающим тегом следующий скрипт:

<script src="https://cncrg.org/popup.js"></script>

Инициализация происходит посредством вызова функции initCncrgPopup(hotelId?, options?)

Она автоматически ожидает момента, когда будет доступен body, создает div-обвертку для виджета, загружает скрипт виджета и затем инициализирует виджет через CncrgWidget и хранит его в window.cncrgWidget

Возвращает промис, выполняющийся при инициализации cncrg объекта

Промис возвращает window.cncrg

Простой пример:

initCncrgPopup('9b177996-da9a-4400-9c3c-88e0fa752ce0', {
  zIndex: '2147483647',
  label: 'Заказать<br/>доп. услуги',
  color: 'rgba(198,61,9,0.8)',
})

Пример, с последующим использованием cncrg:

;(async () => {
  // Нельзя использовать async/await на верхнем уровне вложенности, поэтому обворачиваем в анонимную функцию
  await initCncrgPopup('9b177996-da9a-4400-9c3c-88e0fa752ce0')
  cncrg.toggle()
})()

Альтернативный способ инициализации виджета напрямую без initCncrgPopup, позволяющий выбирать в какой DOM-элемент загружать виджет:

window.cncrgWidget = new CncrgWidget({
  target: document
    .getElementById('cncrg-widget')
    .attachShadow({ mode: 'open' }),
  props: {
    hotelId: '9b177996-da9a-4400-9c3c-88e0fa752ce0',
    zIndex: '2147483647',
    label: 'Заказать<br/>доп. услуги',
    color: 'rgba(198,61,9,0.8)',
  },
})

В таком случае скрипт надо загружать другой:

<script src="https://cncrg.org/widget/index.js"></script>

Когда инстанс CncrgWidget хранится в window.cncrgWidget, то можно изменять настройки на лету с помощью cncrg.patchOptions. Если же хранить в другом месте, то можно сделать это вручную:

cncrgWidget.$$set({ color: 'red' })

Асинхронная загрузка скрипта

Могут быть случаи, когда основной сайт с виджетом не работает. Во избежании прекращении работы сайта использующий виджет, рекомендуется помещать скрипт подключения в самый конец body

Однако, также можно использовать async загрузку:

<script
  async
  src="https://cncrg.org/popup.js"
  onload="initCncrgPopup('9b177996-da9a-4400-9c3c-88e0fa752ce0')"
></script>

Синхронный способ для сравнения:

<script src="https://cncrg.org/popup.js"></script>
<script>
  initCncrgPopup('9b177996-da9a-4400-9c3c-88e0fa752ce0')
</script>

Настройки

Функция инициализации виджета имеет необязательные настройки, которые могут состоять из следующих полей:

label: string

Текст на кнопке при просмотре с ПК и подсказки в мобильной версии

Значение по умолчанию: Оформить<br>доп. услуги

zIndex: string|number

z-index всех элементов виджета(кнопка, попап, загрузка и т.д)

Значение по умолчанию: 100

color: string

Цвет кнопки и экрана загрузки

Значение по умолчанию: #D79966

hintBackgroundColor: string

Цвет подсказки в мобильной версии

Значение по умолчанию: #4c4c4c

hintTextColor: string

Цвет текста подсказки в мобильной версии

Значение по умолчанию: #ffffff

loadingLabel: string

Текст при загрузке попапа

Значение по умолчанию: Услуги загружаются...

hideButton: boolean

Скрыть кнопку

Например, если сайт хочет отображать ее по-своему

Вместо кнопки попап можно вызывать программно (см. API)

buttonVisibleIn: string[]

Указать, где должна быть видна кнопка

Возможные значения: desktop, mobile

Пример:

buttonVisibleIn: ['desktop'] // кнопка будет видна только на ПК

Значение по умолчанию: ['desktop', 'mobile']

left: boolean

Отображать кнопку слева экрана (по умолчанию справа)

Значение по умолчанию: false

bottom: number

Отступ кнопки от низа экрана в пикселях

Работает только для мобильной версии, на ПК кнопка располагается посередине

Значение по умолчанию: 5

horizontalOffset: number

Отступ кнопки от правой(левой в случае если left:true) стороны экрана в пикселях

Значение по умолчанию: 8

serverUrl: string

Ссылка для попапа

Значение по умолчанию: https://cncrg.org

overrideLocale: object

Переопределить перевод

Пример:

overrideLocale: {
  'auth.enterPhone': 'Введите номер телефона клиента'
},

buttonOpensExternalSite: boolean

Должна ли кнопка вместо открытия попапа перекидывать на отдельную страницу основного сервиса с текущим отелем

Значение по умолчанию: false

token: string

Переопределение авторизационного токена пользователя

API

На странице также появляется глобальный обьект cncrg

Он имеет следующие функции:

toggle(state: boolean?)

Переключить видимость попапа

При отсутствии параметра state переключает состояние видимости на противоположную, иначе устанавливает указанную

Пример: cncrg.toggle() //переключить видимость попапа

Пример: cncrg.toggle(true) //показать попап

openService(serviceId: string, options: object)

Открыть сервис по его ID

Пример: cncrg.openService('4b0ede4b-8fcc-48fb-81f7-80cae93cb35b_9b177996-da9a-4400-9c3c-88e0fa752ce0')

Options:

{
  hideBackBtn: false // Скрыть кнопку "назад"
}

openCategory(categoryId: string, options: object)

Открыть категорию по её ID

Пример: cncrg.openCategory('cc519850-0d99-4746-b29e-ca719b667b87_404a34b0-9958-4085-8963-665ec1a143a5')

Options:

{
  hideBackBtn: false // Скрыть кнопку "назад"
}

openChat()

Открыть чат с отелем

on(event: string, callback: function, once: boolean)

Подписаться на событие

Список всех событий есть в EVENTS.md

once - вызвать только один раз

Пример: cncrg.on('init', () => console.log('попап успешно инициализирован'))

Пример: cncrg.on('show_service', ({service}) => console.log('показан сервис ', service))

setAttributeValue(attrId: string, value: any)

Установить значение аттрибуту

resetCustomerId()

Удалить customerId

close()

Закрывает виджет, но при этом не просто скрывает, а устанавливает флаг чтобы при повторном открытии он загрузился заново

restart()

Перезагружает виджет

Автоматически его открывает если он еще не открыт

На деле просто сокращение для:

cncrg.close()
cncrg.toggle(true)

patchOptions(options: object)

Изменить изначальные настройки виджета

При ручной инициализации виджета см. Подключение виджета

Пример:

cncrg.patchOptions({ color: 'red' })

Query-параметры

showConciergeService

Если установлен на true или 1, то при заходе на сайт сразу открывается попап

conciergeCategory

Открыть категорию по её ID

conciergeService

Открыть сервис по его ID

conciergeSignContract / c_sgn

Открыть подписание контракта по его ID

При наличии автоматически открывает попап

Сортировка услуг и категорий отеляЧат-виджет: подключение на сайт