Felsökning

Stöter du på problem? Du är på rätt plats. Denna guide täcker de vanligaste problemen utvecklare stöter på när de integrerar widgeten, tillsammans med steg-för-steg-lösningar. De flesta problem kan lösas på bara några minuter.

Widgeten laddas inte

Om widgeten inte alls visas på din sida, följ dessa felsökningssteg i ordning:

❌ Problem: Widgetskriptet misslyckas med att laddas

✅ Lösning: Verifiera nödvändiga attribut

Se till att alla nödvändiga dataattribut är närvarande på skript-taggen:

<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY" data-locale="en"></script>

❌ Problem: Autentisering misslyckades

✅ Lösning: Kontrollera OAuth-konfiguration

Autentiseringsproblem är vanligtvis enkla att åtgärda. Arbeta igenom dessa kontroller:

• Verifiera client_id är korrekt i din OAuth-applikation - Kopiera det direkt från din instrumentpanel för att undvika skrivfel
• Se till att OAuth-appen är aktiv och inte inaktiverad i din instrumentpanel
• Kontrollera att OAuth-appen har korrekta omdirigerings-URI:er konfigurerade - Widgetdomänen måste vara tillåten
• Verifiera att widgetdomänen är tillåten i CORS-inställningarna på din backend
• Om du nyligen har regenererat autentiseringsuppgifter, se till att du använder de nya värdena

Är du fortfarande fast? Försök att skapa en ny OAuth-applikation i din instrumentpanel. Ibland löser det att börja om konstiga konfigurationsproblem.

❌ Problem: /api/v1/auth/widget-token returnerar 400 (Ursprung inte tillåtet)

✅ Lösning: Justera värdursprung och OAuth tillåtna lista

• Lägg till ditt inbäddningssidans ursprung (till exempel http://localhost:3000) till OAuth tillåtna ursprung.
• Använd fullständigt schema + värd (+ port) format, utan avslutande sökväg.
• När du bäddar in i en iframe, se till att tokenanrop bär värd sidans ursprung i X-Embed-Origin.
• Verifiera att begärnings-URL:en är /api/v1/auth/widget-token (inte äldre sökvägar).

Valideringstips: Kontrollera webbläsarens nätverksflik för tokenbegärningshuvuden och jämför X-Embed-Origin med din OAuth tillåtna ursprung post.

Widgeten syns inte

❌ Problem: Widgeten verkar kollapsad men knappen är osynlig

✅ Lösning: Kontrollera konfigurationspositionering

• Verifiera widgetkonfigurationens positionsinställning
• Kontrollera för CSS-konflikter med position: fixed
• Se till att föräldrakontainrar inte har overflow: hidden

❌ Problem: Widgeten är dold på mobil

✅ Lösning: Justera mobilinställningar

Om hide_on_mobile är aktiverat i konfigurationen, kommer widgeten att döljas på mobila enheter. Inaktivera denna inställning eller justera mobilens brytpunkt.

Stilproblem

Visuella problem är vanliga och vanligtvis lätta att åtgärda. Widgeten är designad för att vara visuellt isolerad från din sida, men ibland kan konflikter uppstå.

❌ Problem: Färger tillämpas inte

✅ Lösning: Rensa cache och kontrollera konfiguration

Följ dessa steg för att diagnostisera färgproblem:

• Rensa webbläsarens cache och ladda om sidan (Ctrl+Shift+R eller Cmd+Shift+R för hård omladdning)
• Verifiera att färgvärden är giltiga hexkoder (måste börja med # och ha 6 tecken, t.ex. #FF5733)
• Kontrollera att konfigurationen sparades i instrumentpanelen - Leta efter en "sparad" bekräftelse
• Se till att du redigerar rätt konfiguration - Kontrollera att konfigurations-ID:t matchar din skript-tagg
• Vänta några sekunder efter att ha sparat - Konfigurationsändringar kan ta 5-10 sekunder att sprida sig

Felsökningstips: Öppna widgeten i din webbläsare och använd inspektera elementverktyget för att verifiera vilka CSS-värden som faktiskt tillämpas. Detta visar om dina färger laddas eller åsidosätts.

❌ Problem: Typsnitt laddas inte

✅ Lösning: Typsnitts konfiguration

• Se till att typsnittfamiljen är inställd på "system-ui" eller ett webbsäkert typsnitt
• Anpassade typsnitt kanske inte laddas på grund av CORS-restriktioner
• Kontrollera att typsnittsvärden stöds

Funktionalitetsproblem

När widgeten laddas korrekt men funktioner inte fungerar som förväntat, kommer dessa lösningar att hjälpa.

❌ Problem: Meddelanden skickas inte

✅ Lösning: Kontrollera session och nätverk

Problem med att skicka meddelanden relaterar vanligtvis till nätverksanslutning eller utgångna sessioner. Diagnostisera systematiskt:

• Verifiera att API-slutpunkter är tillgängliga - Försök att komma åt API-URL:en direkt i din webbläsare
• Kontrollera att autentiseringstoken är giltig - Titta efter 401/403-fel i nätverksfliken
• Se till att sessionen inte har gått ut - Sessioner varar vanligtvis 30 minuter av inaktivitet
• Kontrollera nätverksanslutningsproblem - Är din internetanslutning stabil?
• Titta efter CORS-fel i konsolen - Dessa indikerar att din domän kanske inte är vitlistad
• Verifiera att brandvägg/säkerhetsprogramvara inte blockerar API:et - Företagsnätverk blockerar ibland externa API:er

Snabbtest: Om meddelanden fungerar i ett inkognitofönster men inte i din vanliga webbläsare, är problemet troligen relaterat till webbläsartillägg eller cachad autentiseringsdata.

❌ Problem: Konversationsflöden fungerar inte

✅ Lösning: Validera flödeskonfiguration

• Kontrollera att triggernyckelord matchar exakt
• Verifiera att flödesresponsen är korrekt konfigurerad
• Se till att knappåtgärder är giltiga

Prestandaproblem

❌ Problem: Widgeten laddas långsamt

✅ Lösning: Optimera laddning

• Använd produktionsversion istället för utveckling
• Aktivera webbläsarcaching för statiska tillgångar
• Minimera anpassad CSS och bilder
• Överväg lat laddning om det inte är kritiskt

❌ Problem: Hög minnesanvändning

✅ Lösning: Minska resursanvändning

• Begränsa meddelandehistorikens längd
• Optimera bilder och media
• Inaktivera oanvända funktioner

Webbläsarkompatibilitet

❌ Problem: Widgeten fungerar inte i äldre webbläsare

✅ Lösning: Kontrollera webbläsarstöd

Widgeten kräver moderna webbläsarfunktioner:

• ES6+ JavaScript-stöd
• PostMessage API
• CSS Grid och Flexbox
• Moderna iframe-funktioner

Minimalt stödda webbläsare: Chrome 60+, Firefox 55+, Safari 12+, Edge 79+

Få hjälp

När du behöver ytterligare hjälp utöver denna guide, kommer dessa verktyg och resurser att hjälpa dig att diagnostisera problem eller få support.

Debug-läge

Aktivera debug-läge för att se detaljerad loggning i din webbläsarkonsol. Detta ger insikter om vad widgeten gör i varje steg:

<script  src="https://widget.companin.tech/widget.js"  data-widget-key="YOUR_WIDGET_KEY"  data-dev="true"></script>

Webbläsarutvecklarverktyg

• Kontrollera Konsol-fliken för JavaScript-fel
• Kontrollera Nätverksfliken för misslyckade förfrågningar
• Kontrollera Applikationsfliken för lokala lagringsproblem
• Använd Element-fliken för att inspektera widgetens DOM

Vanliga debugsteg

1. Rensa webbläsarcache och cookies
2. Försök i inkognito-/privat surfläge
3. Testa med olika webbläsare
4. Kontrollera nätverksanslutning
5. Verifiera alla konfigurationsvärden