Felsökning

Har du problem? Du är på rätt ställe. Denna guide täcker de vanligaste problemen som 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: Widgetscriptet misslyckas med att laddas

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

Se till att alla nödvändiga dataattribut finns 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-konfigurationen

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

• Verifiera att client_id är korrekt i din OAuth-applikation - Kopiera den 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 referenser, 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 en ny start oklara konfigurationsproblem.

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

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

• Lägg till ditt inbäddningssidursprung (till exempel http://localhost:3000) till OAuth allowed_origins.
• Använd fullständigt schema + värd (+ port) format, utan efterföljande sökväg.
• När du bäddar in i en iframe, se till att tokenanrop bär värdsideursprunget 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 allowed_origins-post.

Widgeten är inte synlig

❌ Problem: Widgeten verkar kollapsad men knappen är osynlig

✅ Lösning: Kontrollera konfigurationspositioneringen

• 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 gömd på mobila enheter

✅ Lösning: Justera mobila inställningar

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

Stilproblem

Visuella problem är vanliga och vanligtvis lätta att åtgärda. Widgeten är utformad 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 konfigurationen

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ärdena ä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 spridas

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: Typsnittsinställning

• Se till att typsnittsfamiljen är inställd på "system-ui" eller ett webbsäkert typsnitt
• Anpassade typsnitt kanske inte laddas på grund av CORS-restriktioner
• Kontrollera att typsnittsvärdena 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-slutpunkterna är tillgängliga - Försök att komma åt API-URL:en direkt i din webbläsare
• Kontrollera att autentiseringstoken är giltig - Leta efter 401/403-fel i nätverksfliken
• Se till att sessionen inte har gått ut - Sessioner varar vanligtvis 30 minuter av inaktivitet
• Kontrollera för nätverksanslutningsproblem - Är din internetanslutning stabil?
• Leta 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 troligtvis relaterat till webbläsartillägg eller cachad autentiseringsdata.

❌ Problem: Konversationsflöden fungerar inte

✅ Lösning: Validera flödeskonfiguration

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

Prestandaproblem

❌ Problem: Widgeten laddas långsamt

✅ Lösning: Optimera laddning

• Använd produktionsbyggnad istället för utveckling
• Aktivera webbläsarcache 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

Minimala 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.

Felsökningsläge

Aktivera felsökningsläge för att se detaljerad loggning i din webbläsares konsol. Detta ger insikter i vad widgeten gör vid varje steg:

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

Webbläsares utvecklarverktyg

• Kontrollera fliken Konsol för JavaScript-fel
• Kontrollera fliken Nätverk för misslyckade förfrågningar
• Kontrollera fliken Applikation för problem med lokal lagring
• Använd fliken Element för att inspektera widgetens DOM

Vanliga felsökningssteg

1. Rensa webbläsarens cache 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