Простые примеры использования Javascript API Чатры

Открыть чат по клику на кнопке

<!-- Кнопка в любом месте страницы -->
<button onclick="Chatra('openChat', true)">Открыть чат</button>

Или просто сделайте ссылку с адресом #chatraChatExpanded:

<!-- Ссылка в любом месте страницы -->
<a href="#chatraChatExpanded">Открыть чат</a>

Изменить ширину и высоту виджета

Укажите ширину и высоту (в пикселях) перед кодом виджета:

<script>
window.ChatraSetup = {
    chatWidth: 400, /* ширина в пикселях */
    chatHeight: 550 /* высота в пикселях */
};
</script>

<!-- Код виджета Чатры -->

Поменять цвет кнопки чата

Укажите цвета перед кодом виджета:

<script>
window.ChatraSetup = {
    colors: {
        buttonText: '#f0f0f0', /* цвет текста кнопки чата */
        buttonBg: '#565656'    /* цвет фона кнопки чата */
    }
};
</script>

<!-- Код виджета Чатры -->

Используйте color picker, чтобы сгенерировать шестнадцатиричные коды цветов.

Изменять положение кнопки чата в зависимости от ширины экрана

<script>
window.ChatraSetup = {
    buttonPosition: window.innerWidth < 1024 ? // порог ширины
        'bl' : // положение кнопки чата на маленьких экранах
        'br'  // положение кнопки чата на больших экранах
};
</script>

<!-- Код виджета Чатры -->

Используйте эти коды, чтобы задать положение кнопки чата:

• 'bl' – снизу в левом углу
• 'bc' – снизу посередине
• 'br' – снизу в правом углу
• 'lt' – на левой стороне сверху
• 'lm' – на левой стороне посередине
• 'lb' – на левой стороне снизу
• 'rt' – на правой стороне сверху
• 'rm' – на правой стороне посередине
• 'rb' – на правой стороне снизу

Встроить чат в произвольный блок на странице

Укажите id блока, в который вы хотите встроить Чатру, перед кодом виджета:

<script>
window.ChatraSetup = {
    mode: 'frame',
    injectTo: 'chatra-wrapper' /* id блока, в который будет встроен чат */
};
</script>

<!-- Код виджета Чатры -->

Разместите блок в любом месте на странице:

<div id="chatra-wrapper"></div>

Остается задать блоку необходимые размеры, например:

<div id="chatra-wrapper" style="width: 100%; height: 500px;"></div>

Чатра займет весь блок по ширине и высоте.

Отключить мобильную кнопку

Вставьте этот код перед кодом виджета:

<script>
window.ChatraSetup = {
    disabledOnMobile: true
};
</script>

<!-- Код виджета Чатры -->

Или просто отключите настройку «Мобильная кнопка» в настройках виджета.