Webbplats

Lägg till Quickchat AI på din webbplats som en flytande Widget, en inbäddad Embed eller en hostad Chatsida. Täcker installation, åtkomststyrning, utseende, textinnehåll och anpassade parametrar.

Det finns tre sätt att lägga din Quickchat AI-agent på webben. Välj det som passar ytan du vill visa:

Widget – den flytande chattbubblan i hörnet av din sajt. Bäst för allmän support.
Embed – ett inbäddat chattfönster som sitter exakt där du vill ha det på en sida. Bäst för att bädda in AI:n inuti en specifik appvy, hjälpcentersida eller produktsida.
Chatsida – en hostad fullskärmsupplevelse som serveras av Quickchat (ingen installation, ingen kod). Bäst när du vill dela en länk med någon (t.ex. supportmejl, intern Slack, betatestare) utan att röra deras webbläsare.

Installera den yta du valt från Kanaler → Din webbplats → Installera. Sidan har tre underflikar som speglar strukturen i den här artikeln: Installera (kodsnuttar + åtkomst), Utseende (visuell styling) och Textinnehåll (de texter och etiketter som besökaren ser).

Widgeten låter dig bädda in din Quickchat AI-agent direkt på din webbplats och ger användarna ett smidigt sätt att interagera med AI:n. Widgeten visas vanligtvis som en chattbubbla längst ned till höger på sidan. När man klickar på den expanderar den till ett chattfönster, där användarna kan ställa frågor, få hjälp eller hämta information.

Så bäddar du in widgeten på din webbplats

Hitta sidans kod

Öppna sidans HTML-fil eller webbplatsbyggarens kodredigerare.
Hämta widgetkoden
- Logga in i Quickchat AI-appen.
- Gå till Din webbplats under kategorin Kanaler i vänsterkolumnen.
- Klicka på fliken Installera.
- Kopiera koden för Widget script.
Klistra in koden

Lägg in widgetskriptet strax före den avslutande </body>-taggen på alla sidor där widgeten ska visas.

Om du använder WordPress

Det enklaste sättet är vårt officiella Quickchat AI Agent-plugin: installera det från WordPress Plugin Directory, klistra in ditt Scenario ID, så visas widgeten automatiskt utan någon temakod att redigera. WordPress-guiden har steg-för-steg-instruktioner, plus ett alternativ med manuellt skript om du hellre slipper plugin.

Om du använder en sajtbyggare

Om du använder plattformar som WordPress, Webflow eller Wix, se deras dokumentation om att lägga till anpassad kod.

Behöver du hjälp, kontakta oss på contact@quickchat.ai.

Chatsida

Chatsida är en hostad fullskärmsversion av din AI-agent som ligger på en Quickchat-URL. Det finns inget att installera. Dela länken så kan dina besökare chatta med din agent direkt i webbläsaren. Använd den när:

Du vill ha en chattupplevelse men inte har någon webbplats (eller inte vill röra dess kod).
Du delar AI:n internt med en liten grupp (betatestare, supportteam, säljprospekt) och behöver en åtkomststyrd länk istället för en publik widget.
Du vill skicka AI:n som en uppföljningskanal i mejl, Slack eller ditt CRM.

Ställ in vem som kan öppna Chatsida från Installera → Chattillgång (se Åtkomststyrning nedan).

Åtkomststyrning

Fliken Installera har två åtkomststyrningar som gäller din distribution:

En huvudbrytare högst upp på fliken Installera. När den är aktiverad fungerar Widget- och Embed-skripten som vanligt i besökarnas webbläsare. När den är inaktiverad är Widget och Embed otillgängliga på din sajt även om skriptet fortfarande är inklistrat. Det är användbart för att tillfälligt ta AI:n offline utan att ta bort kodsnutten, eller för att begränsa publik åtkomst medan du håller Chatsida öppen för inbjudna användare.

Chattillgång

Oberoende av Widget & Embed-brytaren kan du begränsa vem som kan öppna Chatsida:

Alla – URL:en till Chatsida är publik. Alla med länken kan använda den.
Endast inbjudna användare – endast chattanvändare som du har bjudit in (via e-post) kan använda Chatsida. De behöver autentisera sig.
Ingen – Chatsida är helt inaktiverad.

För att ge åtkomst under Endast inbjudna användare, klicka på Bjud in chattanvändare bredvid radioknappen. Det tar dig till Kontoinställningar → Chattanvändare, där du kan skicka inbjudningar via e-post och hantera vem som har åtkomst.

Anpassa

Underflikarna Utseende och Textinnehåll låter dig skräddarsy hur Widget, Embed och Chatsida ser ut och vilken text dina besökare ser. Alla tre distributionsytorna delar dessa inställningar. Ändra dem en gång så gäller de överallt där din agent är distribuerad.

Den högra panelen på flikarna Installera/Utseende/Textinnehåll har egna förhandsvisningskontroller. Växla mellan förhandsvisningar av Widget, Embed och Chatsida, och mellan Desktop- och Mobile-vyer, för att se dina ändringar innan du publicerar.

Utseende

Visuell styling för chattytorna, grupperad i Branding, Storlek & Position, Tema och Övriga inställningar.

Varumärke

AI-agentens avatar – en enda bild som används både i chattrubriken och på launcher-knappen (max 5 MB). Det här är en inställning, inte två: ladda upp en bild så visas den på båda ställena (den ersätter den gamla separata rubrikloggan och launcher-ikonen). Varje Agent börjar med en inbyggd standardavatar. Återställ till standard återställer den, och om du tar bort den visas ingen avatar alls.

Storlek och position

Launcherstorlek – Classic, Input Only eller Liten. Styr hur chatt-launchern ser ut innan den öppnas.
Launcher-etikett – visas endast när Liten är valt: anpassad text på den lilla launcher-knappen (upp till 25 tecken), t.ex. “Ask AI” eller “Chat”. Lämna tomt för en launcher med enbart ikon.
Widgetposition – nedre höger eller nedre vänster.
Chattfönstrets dimensioner – bredd (300–700 px) och höjd (400–1200 px) på chattfönstret.
Dragbar launcher – låt besökare dra launchern till en annan plats på sidan. Användbart när den täcker viktigt innehåll.

Tema

Välj hur chattytorna färgsätts:

Ljus och Mörk är fasta förinställningar som ser likadana ut på alla konton.
Anpassat låser upp en hel egen palett. När Anpassat är valt visas färgkontroller för bakgrund, rubrik och rubriktext, accent (används för knappar som start-knappen före chatt, förslagschips och betygsåtgärder), meddelandebubbla och dess text, AI-meddelandetext, länkfärg, inmatningsfält, kanter och mer. Varje färg kontrolleras mot WCAG AA-kontrast gentemot sin bakgrund och varnar dig när en kombination är svårläst.

Färgsatta rubrik- och accentfärger finns i Anpassat-temat. Ljus och Mörk förblir neutrala förinställningar, så att växla mellan dem för aldrig med sig en anpassad färg.

När Anpassat är valt får Chatsidan även egna sidofältsfärger: Sidofältets bakgrund, Sidofältets text, Sidofältets hover och Text vid hover. De gäller endast helsidesvyn av Chatsidan, inte bubble- eller embed-widgeten. Lämna textfärgerna tomma så väljer Chatsidan automatiskt en läsbar färg för den bakgrund du väljer.

Du kan också ställa in hörnradie (rundning på bubblor, inmatningsfält och knappar) och textstorlek. Båda gäller i alla temalägen.

Övriga inställningar

Öppna widget automatiskt – öppna widgeten automatiskt när sidan laddas.
Ta bort Quickchat AI-varumärke – dölj sidfoten “Powered by Quickchat AI” för en helt vit-etiketterad upplevelse (tillgängligt på planer som inkluderar white-labeling).
Konversationsbetyg – låt besökare betygsätta konversationen i slutet. Resultaten visas i Insights → Konversationsbetyg.

Textinnehåll

Underfliken Textinnehåll styr varje textbit som besökaren ser:

Rubriktext – text som visas högst upp i chattfönstret.
Välkomstmeddelande – det första meddelandet från AI-agenten i början av varje konversation (t.ex. “Hej, behöver du hjälp?”).
Visa som popup – brytare som visar välkomstmeddelandet som en flytande pratbubbla bredvid launchern för att fånga uppmärksamhet innan besökaren klickar.
Konversationsstartare – upp till 3 exempelmeddelanden som visas för besökaren innan de börjar skriva. Att klicka på ett skickar det som första meddelande. Användbart för att styra besökare mot din AI:s styrkor (“Hur installerar jag widgeten?”, “Vilka integrationer stöder ni?”).
Inmatningsplatshållare – ledtext i det tomma meddelandefältet.
Ansvarsfriskrivningstext – text som visas bakom konversationen, vanligtvis för att informera användarna om att de pratar med en AI. Vi rekommenderar att hålla den tydlig och synlig.

Avancerade funktioner: Anpassade parametrar

Quickchat AI Widget och Embed låter dig skicka anpassade parametrar vid initiering. De kan användas för att:

förbättra analys (de är tillgängliga i CSV-exporten på Quickchat-plattformen)
anpassa konversationen (Quickchat AI är medveten om alla angivna parametrar)

Här är exempel på användbara anpassade parametrar:

User name: Mike
Subscription Tier: VIP
Most recently purchased item: Silver package (upgraded)
Next account level: Platinum
Points required to reach the next account level: 758

Här är en exempelkonversation som visar en AI-agent som är medveten om värden angivna i anpassade parametrar:

Exempelkonversation med anpassade parametrar

För att lägga till anpassade parametrar som ovan, inkludera följande rad i skriptet du hittade under Din webbplats > Installera.

Widget och Embed använder samma anropssignatur:

_quickchat("custom_params", {
  "User name": "Mike",
  "Subscription Tier": "VIP",
  "Most recently purchased item": "Silver package (upgraded)",
  "Next account level": "Platinum",
  "Points required to reach the next account level": "758",
});

Dessa attribut tilldelas varje ny konversation; vi rekommenderar att du håller dig till ett fåtal nycklar.

Exempelskript:

widget

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("custom_params", {"User name": "Mike", "Subscription Tier": "VIP", "Most recently purchased item": "Silver package (upgraded)", "Next account level": "Platinum", "Points required to reach the next account level": "758"});
  _quickchat("init", "abcdefghij");
</script>

Embed

<div id="quickchat-embedded" style="height:600px;overflow:hidden;"></div>
<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("containerId", "quickchat-embedded");
  _quickchat("custom_params", {"User name": "Mike", "Subscription Tier": "VIP", "Most recently purchased item": "Silver package (upgraded)", "Next account level": "Platinum", "Points required to reach the next account level": "758"});
  _quickchat("init", "abcdefghij");
</script>

Embed

Embed låter dig placera Quickchat AI-agenten direkt inuti en sida som ett inbäddat chattfönster, istället för en flytande bubbla. Använd det när du vill att chatten ska sitta på en bestämd plats på sidan, t.ex. en hjälpcenterkolumn, en kontaktsida, en sidopanel i appen osv.

Så lägger du till Embed

Hämta Embed-koden
- Logga in i Quickchat AI-appen.
- Gå till Kanaler → Din webbplats i vänsterkolumnen.
- Klicka på fliken Installera.
- Kopiera Embed-kodsnutten (den inkluderar både <div id="quickchat-embedded">-containern och loader-skriptet).
Öppna sidans HTML-fil eller webbplatsbyggarens kodredigerare.
Klistra in koden
- Lägg in Embed-kodsnutten i <body> på din sida.
- Placera den på exakt den plats där du vill att chattfönstret ska visas. <div>-elementet styr storleken. Justera den inline-satta style="height:600px" så den matchar platsen i din layout.