Ръководство за вграждане

Документация

Продавайте билети
от вашия сайт

С вградения бутон посетителите на вашия уебсайт могат да купят билети, без да напускат страницата. Необходими са само три реда HTML код — без програмиране, без регистрация на сървър.

Как работи

📋
1. Копирате кода
От настройките на събитието в администраторския панел
🖥️
2. Поставяте на сайта
В HTML-а на вашата страница преди </body>
🎟️
3. Готово
Посетителите купуват директно, вие виждате поръчките в панела
ℹ️ Плащанията се обработват изцяло от NaJivo — вашият сайт не съхранява и не обработва данни за карти.

Стъпка по стъпка

1

Вземете кода от администраторския панел

Влезте в Admin → Събития, отворете желаното събитие и изберете таба „Вграждане".

Там можете да промените текста и цвета на бутона, след което да копирате готовия код с бутона „Копирай".

2

Поставете кода в HTML-а на вашата страница

Кодът се поставя на всяко място в страницата, където искате да се появи бутонът — например точно под описанието на събитието.

<!-- Поставете там, където искате да се вижда бутонът -->
<script
  src="https://app.najivo.bg/embed.js"
  data-bileti-event="ИДЕНТИФИКАТОР-НА-СЪБИТИЕТО"
  data-label="Купи билети"
  data-color="#C8963E"
  async>
</script>

Идентификаторът се генерира автоматично в таба „Вграждане" — не се налага да го пишете ръчно.

3

Проверете резултата

Отворете страницата в браузъра. На мястото на кода ще видите бутон. Кликнете върху него — ще се отвори прозорец за покупка на билети.

Така изглежда бутонът на страницата ви:

Купи билети
↑ кликването отваря формата за покупка

Настройки

Всички настройки се задават като атрибути на <script> тага.

Атрибут Стойност Описание
data-bileti-eventзадължително UUID на събитието Уникалният идентификатор на събитието. Взима се автоматично от таба „Вграждане" в администраторския панел.
data-labelнезадължително Текст
по подразбиране: „Купи билети"
Текстът, изписан върху бутона.
data-colorнезадължително HEX цвят
по подразбиране: #C8963E
Цветът на фона на бутона. Трябва да е шестнадесетичен цветови код, напр. #1B3A6B.
asyncпрепоръчително Зарежда скрипта асинхронно, без да забавя зареждането на страницата ви.

Примери

Синьо копче с персонализиран текст:

<script
  src="https://app.najivo.bg/embed.js"
  data-bileti-event="ВАШ-UUID"
  data-label="Резервирайте място"
  data-color="#1B3A6B"
  async>
</script>

Зелено копче на английски:

<script
  src="https://app.najivo.bg/embed.js"
  data-bileti-event="ВАШ-UUID"
  data-label="Buy Tickets"
  data-color="#16A34A"
  async>
</script>

Инструкции за популярни платформи

WordPress

Отворете страницата за редакция → добавете блок „Персонализиран HTML" (Custom HTML) → поставете кода вътре → публикувайте. Не поставяйте кода в текстов блок — той ще бъде показан като текст, а не изпълнен.

Wix

Добавете елемент „Embed" → „Custom Code" → „Add Custom Code" от таблото за управление. Поставете кода и изберете „Body — end" като позиция. Запазете и публикувайте.

Squarespace

Добавете блок „Code" на страницата. Поставете кода вътре и премахнете отметката „Display Source". Запазете промените.

Статичен HTML сайт

Поставете кода директно в .html файла — на произволно място в <body>, там където искате да се покаже бутонът.

Често задавани въпроси

Безопасно ли е да поставям чужд скрипт на сайта си?

Скриптът embed.js само създава бутон и прозорец (iframe) — не чете данни от вашия сайт, не поставя бисквитки и не изпраща информация извън NaJivo. Целият процес на плащане се случва вътре в защитения прозорец на NaJivo, а не на вашата страница.

Бутонът не се появява — какво да проверя?

Уверете се, че атрибутът data-bileti-event съдържа правилния UUID на събитието (копиран от таба „Вграждане"). Проверете в конзолата на браузъра (F12 → Console) дали има грешки при зареждане на скрипта. Уверете се, че събитието е публикувано.

Мога ли да имам повече от един бутон на страницата?

Да. Поставете отделен <script> таг за всяко събитие — всеки ще генерира свой самостоятелен бутон.

Клиентът плати — как разбирам?

Всяка поръчка се появява незабавно в Admin → Поръчки. Клиентът получава билетите си по имейл веднага след плащане.

Работи ли на мобилни устройства?

Да. Прозорецът за покупка е напълно адаптиран за телефони и таблети. Поддържат се Google Pay и Apple Pay на съвместими устройства.

Мога ли да стилизирам бутона допълнително с CSS?

Скриптът генерира обикновен <button> елемент. Можете да го насочите с CSS селектор и да промените font-size, border-radius, padding и всичко друго. Пример: button[data-bileti-widget] { border-radius: 0; } — атрибутът се добавя автоматично.

Имате въпрос?

Свържете се с нас и ще ви помогнем да настроите вградения бутон за вашия сайт.

Тествайте на демо страница → Пишете ни