Osadzony czat

Wyświetlaj widget czatu bezpośrednio na stronie zamiast jako pływający dymek

Wszystkie plany

Przegląd

Domyślnie widżet czatu Asyntai pojawia się jako pływający dymek w rogu Twojej strony. Dzięki osadzonemu czatowi możesz również wyświetlić czat bezpośrednio na swojej stronie — na przykład w sekcji "Porozmawiaj z nami" na stronie głównej.

Pływający dymek nadal działa obok osadzonego czatu. Odwiedzający, którzy nie przewiną do sekcji z osadzonym czatem, mogą nadal korzystać z dymka. Oba współdzielą tę samą rozmowę.

Jak to działa

Dodaj jeden tag script Umieść go tam, gdzie chcesz, aby czat pojawił się w Twoim HTML

Czat renderuje się w linii Widżet pojawia się w tym miejscu, zawsze widoczny, w tym samym rozmiarze co zwykły czat

Dymek pozostaje aktywny Pływający dymek pozostaje w rogu dla odwiedzających, którzy nie widzą osadzonego czatu

Wspólna rozmowa Wiadomości synchronizują się między osadzonym czatem a pływającym widżetem w czasie rzeczywistym

Konfiguracja

Dodaj tę pojedynczą linię HTML tam, gdzie chcesz, aby czat pojawił się na Twojej stronie:

<script src="https://asyntai.com/static/js/chat-embed.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Zastąp YOUR_WIDGET_ID swoim identyfikatorem widżetu. Kod osadzania z wpisanym identyfikatorem znajdziesz na stronie konfiguracji osadzonego czatu.

Uwaga: Główny skrypt chat-widget.js musi również znajdować się na stronie. Jeśli widżet Asyntai został już zainstalowany na Twojej stronie, jest to już załatwione.

Przykład

Oto jak można go użyć na stronie głównej:

<section style="max-width: 500px; margin: 0 auto;">
    <h2>Chat with us</h2>
    <p>Ask us anything — our AI assistant is here to help.</p>

    <!-- The chat will appear right here -->
    <script src="https://asyntai.com/static/js/chat-embed.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</section>

Szczegóły

Rozmiar

Osadzony czat renderuje się w tym samym rozmiarze co pływający widżet: 400px szerokości i 650px wysokości na komputerze, pełna szerokość i 550px wysokości na urządzeniu mobilnym. Możesz kontrolować jego położenie, stylizując kontener nadrzędny.

Zachowanie pływającego dymka

Gdy osadzony czat jest widoczny na ekranie i odwiedzający kliknie pływający dymek, strona przewinie się do osadzonego czatu. Jeśli osadzony czat nie jest widoczny, dymek otwiera zwykłe nakładkowe okno czatu.

Synchronizacja wiadomości

Zarówno osadzony, jak i pływający czat współdzielą tę samą rozmowę. Wiadomości wysłane z jednego pojawiają się w obu. Używana jest ta sama sesja, kontekst AI i historia czatu.

Wiele stron

Możesz używać osadzonego czatu na niektórych stronach, a zwykłego pływającego widżetu na innych. Wystarczy umieścić skrypt osadzania na stronach, na których chcesz mieć czat w linii. Rozmowa przenosi się między stronami jak zwykle.

Podgląd na żywo

Oto osadzony czat na żywo, abyś mógł zobaczyć, jak wygląda:

Wymagania

Główny widżet czatu Asyntai (chat-widget.js) musi być zainstalowany na stronie

Działa na wszystkich planach — nie wymaga uaktualnienia

Kompatybilny ze wszystkimi przeglądarkami obsługującymi Shadow DOM (wszystkie nowoczesne przeglądarki)

Wskazówka: Przetestuj osadzony czat, umieszczając go najpierw na stronie testowej. Upewnij się, że wygląda prawidłowo w układzie Twojej strony przed wdrożeniem na produkcję.

Dokumentacja