# WhatsApp-widget ## Integrering av WhatsApp-widget Lägg till en flytande WhatsApp-chattknapp på din webbplats med denna enkla guide. > **Bra att veta.** WhatsApp-widgeten är en enkel "klicka för att chatta"-knapp — när besökaren klickar på den öppnas WhatsApp så att de kan skicka meddelanden till dig där. Den hämtar inte meddelanden till din chattinkorg och aktiverar inte AI:n på egen hand. För en AI-chattupplevelse direkt på din webbplats, använd den separata [Chat Widget](chat-widget.md) istället. > > **Vill du bara ha en vanlig länk eller en egen knapp?** Om du inte vill ha den flytande widgeten och hellre vill länka din egen knapp (eller en text) direkt till en WhatsApp-chatt, hoppa till [Föredrar du en vanlig länk eller knapp? (wa.me)](#prefer-a-plain-link-or-button-wa-me) nedan. För ett SMS-alternativ, se [Lägga till en klicka-för-att-skicka-SMS-länk](../messaging-channels/sms.md#adding-a-click-to-text-sms-link-to-your-website). ### Installation 1. Öppna webbplatsens HTML-fil i en textredigerare. 2. Leta upp taggen `` (vanligtvis i slutet av din HTML-fil). 3. Klistra in följande skript precis före taggen ``: {% code overflow="wrap" %} ```html ``` {% endcode %} 1. I koden ovan, ersätt: * `NUMBER` med ditt WhatsApp-nummer * Till exempel: för numret +1 555 123 4567, använd helt enkelt: 15551234567 ### Lägga till ett anpassat meddelande Om du vill att ett förifyllt meddelande ska visas när någon klickar på knappen: 1. Använd den här koden istället: {% code overflow="wrap" %} ```html ``` {% endcode %} 1. Exempel med ett riktigt nummer och meddelande: {% code overflow="wrap" %} ```html ``` {% endcode %} ### Vad du får Efter installationen kommer du automatiskt att se: * En grön WhatsApp-knapp längst ner till höger på din webbplats * Knappen förblir synlig när man skrollar * Knappen fungerar sömlöst på mobila enheter * En diskret animering visas när man för muspekaren över knappen ### Ytterligare information * Ditt telefonnummer kan skrivas med eller utan: * Plustecken (+) * Mellanslag * Bindestreck (-) * Dessa kommer automatiskt att hanteras korrekt * Meddelandet kan innehålla mellanslag som vanligt * Inga ytterligare filer eller installationer behövs * Knappen anpassas automatiskt till mobilskärmar ### Komplett webbsideexempel {% code overflow="wrap" %} ```html My Website ``` {% endcode %} ## Föredrar du en enkel länk eller knapp? (wa.me) Widgeten ovan ger dig en färdig flytande knapp. Men om du redan har en egen knapp (eller en menylänk, bild eller text) och bara vill att den ska öppna en WhatsApp-chatt med ditt nummer, behöver du inte widgeten alls — du länkar den helt enkelt till en `wa.me`-URL. Formatet är: {% code overflow="wrap" %} ``` https://wa.me/NUMBER ``` {% endcode %} Ersätt `NUMBER` med ditt fullständiga nummer i internationellt format — **endast siffror, inget plustecken, mellanslag eller bindestreck**. Till exempel, för +31 6 5801 5937 använder du: {% code overflow="wrap" %} ``` https://wa.me/31658015937 ``` {% endcode %} ### Förifyllt meddelande För att ha ett meddelande färdigskrivet när chatten öppnas, lägg till `?text=` följt av ditt meddelande: {% code overflow="wrap" %} ``` https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question ``` {% endcode %} Mellanslag i meddelandet måste skrivas som `%20` (det är så här länkar hanterar mellanslag). ### Lägga till på en knapp Länka valfri knapp till den URL:en — på exakt samma sätt som du skulle länka en knapp till vilken annan webbadress som helst. I rå HTML ser det ut så här: {% code overflow="wrap" %} ```html Chat on WhatsApp ``` {% endcode %} I ett verktyg för att bygga webbplatser (Wix, Squarespace, WordPress, Webflow, etc.), lägg till en knapp som vanligt och klistra in `wa.me`-URL:en i dess "länk"- / "URL"-fält. > **Vill du ha en kort länk som roterar mellan flera nummer, kommer ihåg återkommande besökare och spårar klick?** Använd korta länkar (under **Inställningar → Kanaler**) istället för en rå `wa.me`-URL.