Înainte de instalare
Codul de instalare se ia din contul tău Wawsome, după ce adaugi site-ul. Fiecare site are o cheie unică (
data-api-key), deci nu copia coduri de pe alte site-uri sau din exemple. Dacă nu ai cont, pornește perioada de probă gratuită de 7 zile de pe pagina de prețuri Wawsome.Pașii de instalare pe site-uri custom
- Autentifică-te în panoul Wawsome și copiază codul de instalare al site-ului;
- HTML static sau randare pe server: lipește codul în
<head>, în layoutul comun al paginilor (PHP, Python, .NET, Java, orice backend); - React / Next.js: adaugă scriptul în layoutul principal (de exemplu cu componenta
Scriptdin Next.js, cu aceleași atribute ca în codul din contul Wawsome); - Vue / Angular: adaugă scriptul în
index.html; - Publică și verifică apariția butonului de accesibilitate.
Poziția, culorile și limba widgetului se configurează din panoul Wawsome, fără să modifici codul. Detalii generale în ghidul de instalare.
Exemplu de integrare în Next.js
Exemplul de mai jos folosește o cheie de test. Înlocuiește-o cu cheia din contul tău Wawsome.
// app/layout.tsx
import Script from 'next/script'
<Script
src="https://loader.wawsome.com"
data-api-key="wgt_EXEMPLU_cheie_de_test_000000"
strategy="afterInteractive"
/>Bune practici pentru aplicații custom
- Mută focusul pe titlul paginii noi la schimbarea rutei și anunță schimbarea prin
aria-live; - Folosește HTML semantic înainte de ARIA: un
<button>nativ e mereu mai bun decât un<div role="button">; - Testează fluxurile critice exclusiv de la tastatură la fiecare lansare;
- Rulează scanarea Wawsome după fiecare lansare importantă.