Instalacja widżetu czatu na stronie

Widżet czatu to okno czatu na twojej stronie, przez które klienci do ciebie piszą. Utworzysz go w „Ustawieniach”, w sekcji „Widżety czatu”, przyciskiem „Nowy widżet czatu”.

Wpisz adres strony

Wpisz adres, na przykład shop.example.com. Obejrzymy stronę i zaproponujemy kolory, logo i języki. Adres staje się też pierwszym dozwolonym adresem: widżet działa tylko pod dozwolonymi adresami.

app.hrc.lt

Sprawdź wygląd i języki

Podgląd pokazuje, jak będzie wyglądał widżet. Kolory, teksty i języki zmienisz teraz albo później w Ustawieniach widżetu.

Wstaw kod

Najprościej jeden znacznik <script> tuż przed znacznikiem </body>:

<script
  src="https://widget.hrc.lt/v1/loader.js"
  data-widget-key="wk_xxxxxxxxxxxxxxxxxxxx"
  async
></script>

Jeśli chcesz przekazywać dane o użytkowniku albo wywoływać widżet z własnego kodu, użyj pełnego kodu z kolejką poleceń:

<script>
  (function (w, d) {
    w.HrcWidget = w.HrcWidget || function () {
      (w.HrcWidget.q = w.HrcWidget.q || []).push(arguments);
    };
    var s = d.createElement('script');
    s.async = true;
    s.src = 'https://widget.hrc.lt/v1/loader.js';
    d.head.appendChild(s);
  })(window, document);
  HrcWidget('init', {
    widgetKey: 'wk_xxxxxxxxxxxxxxxxxxxx',
    locale: 'auto',
  });
</script>

Kreator pokazuje kod już z kluczem twojego widżetu.

app.hrc.lt

WordPress, Shopify, Wix i Google Tag Manager

• WordPress: zainstaluj darmową wtyczkę WPCode, otwórz Code Snippets, Header & Footer i wklej kod w pole Footer.
• Shopify: Online Store, Themes, „…” przy motywie, Edit code, plik theme.liquid: wklej kod tuż przed </body>.
• Wix: Settings, Custom Code, Add Custom Code, miejsce Body - end, wszystkie strony. Wymaga płatnego planu Wix i podłączonej domeny.
• Google Tag Manager: Tags, New, Custom HTML, wklej kod, Triggering All Pages, potem Submit.

Sprawdź, czy działa

Kreator co kilka sekund sprawdza, czy widżet załadował się na twojej stronie. Otwórz stronę i wyślij wiadomość testową: pojawi się w skrzynce odbiorczej.

kopa.example

Dozwolone adresy i localhost

Widżet działa tylko pod dozwolonymi adresami. Dodaj każdy jako https://shop.example.com; https://*.example.com obejmuje wszystkie subdomeny twojej domeny. Do pracy nad stroną włącz „Zezwól na localhost”. Więcej: Kod do osadzenia, React i CSP.