Przejdź do głównej treści
ChattyBox Logo

Kreator AI Prompts

Użyj tych podpowiedzi w przypadku programów Cursor, Claude, v0, Bolt, Lovable, Replit lub innego kreatora AI, jeśli chcesz, aby zainstalował on za Ciebie ChattyBox.

Przed wklejeniem podpowiedzi skopiuj dokładny fragment widżetu z panelu kontrolnego ChattyBox. Zachowaj klucz publiczny widget API i data-api-url dokładnie tak, jak pokazano.

Uniwersalny Prompt​

Prompt gotowy do skopiowania
Uniwersalny Prompt

Dodaj ChattyBox do tej witryny.

Użyj tego skryptu z mojego pulpitu nawigacyjnego ChattyBox:

Fragment widgetuHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Wymagania
  1. 1Załaduj skrypt raz na każdą stronę publiczną, na której odwiedzający powinni zobaczyć chatbota.
  2. 2Umieść go blisko końca ciała lub użyj zalecanego modułu ładującego skrypty.
  3. 3Nie ujawniaj kluczy API serwera prywatnego, tokenów administratora, kluczy tajnych środowiska ani poświadczeń usług.
  4. 4Zachowaj publiczny klucz ChattyBox widgetu API dokładnie tak, jak podano.
  5. 5Zachowaj data-api-url dokładnie tak, jak podano w panelu kontrolnym ChattyBox.
  6. 6Jeśli ta witryna zawiera strony w określonym języku, ustaw data-locale na język strony lub polegaj na atrybucie html lang strony.
  7. 7Sprawdź, czy widżet się wyświetla, otwiera, wysyła pytanie testowe i wyświetla cytaty źródłowe.

Next.js / React Prompt​

Prompt gotowy do skopiowania
Next.js / React Prompt

Zainstaluj ChattyBox w tej powłoce aplikacji Next.js lub React.

Użyj tego fragmentu widżetu z mojego pulpitu nawigacyjnego ChattyBox:

Fragment widgetuHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Wymagania wdrożeniowe
  1. 1W przypadku routera aplikacji Next.js dodaj skrypt w app/layout.tsx z next/script i strategy="afterInteractive".
  2. 2W przypadku Next.js Pages Router dodaj go w pages/_app.tsx lub pages/_document.tsx, używając zalecanego przez platformę modułu ładującego skrypty.
  3. 3W przypadku React SPA załaduj skrypt raz w powłoce aplikacji najwyższego poziomu lub index.html, a nie w każdym komponencie trasy.
  4. 4Nie twórz punktu końcowego zaplecza ani serwera proxy dla tego publicznego fragmentu widżetu.
  5. 5Nie należy przenosić klucza publicznego widgetu API do zmiennej środowiskowej prywatnego serwera, chyba że kompilacja nadal wysyła go do przeglądarki.
  6. 6Zachowaj data-api-key i data-api-url dokładnie tak, jak podano.
  7. 7Po wdrożeniu powiedz mi, który plik się zmienił i jak przetestować, czy widget się otwiera i odpowiada cytatami.

Docusaurus Prompt​

Prompt gotowy do skopiowania
Docusaurus Prompt

Zainstaluj ChattyBox w tej witrynie dokumentacji Docusaurus.

Użyj tego fragmentu widżetu z mojego pulpitu nawigacyjnego ChattyBox:

Fragment widgetuHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Wymagania
  1. 1Dodaj skrypt raz dla całej witryny dokumentów, najlepiej w src/theme/Root.tsx lub src/theme/Root.js.
  2. 2Zachowaj istniejący motyw Docusaurus, pasek nawigacyjny, stopkę, narzędzia analityczne i zachowanie i18n w stanie nienaruszonym.
  3. 3Nie dodawaj skryptu do każdej strony Markdown.
  4. 4Jeśli witryna ma zlokalizowane trasy, użyj data-locale tylko wtedy, gdy jest to konieczne i dopasuj je do bieżącego języka strony.
  5. 5Upewnij się, że skrypt nadal zawiera data-api-key i data-api-url.
  6. 6Po zaimplementowaniu uruchom kompilację Docusaurus lub polecenie weryfikacji istniejącej dokumentacji projektu.

WordPress lub CMS Prompt​

Prompt gotowy do skopiowania
WordPress lub CMS Prompt

Dodaj ChattyBox do tej witryny WordPress lub CMS.

Użyj tego fragmentu widżetu z mojego pulpitu nawigacyjnego ChattyBox:

Fragment widgetuHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Wymagania
  1. 1Dodaj skrypt za pomocą najbezpieczniejszej dostępnej globalnej ścieżki kodu niestandardowego: skrypty stopki motywu, stopka motywu podrzędnego, wtyczka skryptu nagłówka/stopki, globalny niestandardowy obszar HTML HTML lub Google Tag Manager.
  2. 2Załaduj go na publiczne strony, posty, dokumenty i artykuły z bazy wiedzy, w których odwiedzający powinni zadawać pytania.
  3. 3Nie ładuj go na stronach administracyjnych, przy kasie, koncie, stronach przejściowych ani na stronach członkostwa prywatnego, chyba że wyraźnie o to poprosisz.
  4. 4Nie usuwaj data-api-key, data-api-url ani asynchronizacji ze skryptu.
  5. 5Jeśli CMS ma oddzielne szablony językowe, w razie potrzeby ustaw data-locale na pasujący kod języka.
  6. 6Podaj dokładne miejsce dodania skryptu i krótki plan testów przeglądarki.

Google Tag Manager Prompt​

Prompt gotowy do skopiowania
Google Tag Manager Prompt

Utwórz instrukcje instalacji ChattyBox z Google Tag Manager.

Użyj tego fragmentu widżetu z mojego pulpitu nawigacyjnego ChattyBox:

Fragment widgetuHTML
<script
src="https://chattybox.ai/widget.js"
data-api-key="YOUR_API_KEY"
data-api-url="YOUR_WIDGET_API_URL"
async
></script>
Wymagania
  1. 1Utwórz niestandardowy tag HTML z dokładnym skryptem powyżej.
  2. 2Użyj wyzwalacza Wszystkie strony, chyba że określę węższy zestaw stron publicznych.
  3. 3Wspomnij o ustawieniach zgody, jeśli ten kontener GTM korzysta z trybu zgody.
  4. 4Uwzględnij kontrole w trybie podglądu dotyczące uruchomienia tagu, pojawienia się programu uruchamiającego widżety, wysłania pytania testowego i pojawienia się cytatów.
  5. 5Nie sugeruj dodawania prywatnych kluczy API lub kluczy tajnych serwera do GTM.

Walidacja po instalacji Prompt​

Prompt gotowy do skopiowania
Walidacja po instalacji Prompt

Przejrzyj tę instalację ChattyBox pod kątem gotowości do uruchomienia.

Sprawdź te wymagania
  1. 1Skrypt widgetu jest ładowany raz na zamierzonych stronach publicznych.
  2. 2Skrypt zawiera src="https://chattybox.ai/widget.js".
  3. 3Skrypt zawiera data-api-key i data-api-url.
  4. 4Język strony i dowolna wartość data-locale odpowiadają treści strony.
  5. 5W konsoli przeglądarki nie ma brakującego atrybutu ChattyBox, nieprawidłowego klucza ani błędów pochodzenia.
  6. 6Widżet otwiera się, wysyła realistyczne pytanie testowe, odpowiedzi ze zindeksowanej treści i wyświetla cytaty źródłowe.
  7. 7Witryna nie ujawnia prywatnych kluczy serwera ani niepowiązanych tajemnic.

Zwróć wszelkie problemy ze ścieżkami plików, dokładnymi odniesieniami do kodu i najmniejszą bezpieczną poprawką.