Webbplats

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: Installera (välj hur du lägger till din AI-agent), Utseende (visuell styling) och Textinnehåll (de texter och etiketter som dina besökare ser). Fliken Installera öppnas med en metodväljare, håller tillgänglighets- och åtkomststyrningar i en egen sektion och visar ett kopierbart Scenario ID som plugins och API:et behöver.

Widget

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å lägger du till Widgeten på din webbplats

Öppna Kanaler → Din webbplats → Installera. Fliken inleds med ”Hur vill du lägga till din AI-agent?” och listar installationsmetoderna, enklast först. Välj den som passar din sajt:

• WordPress – installera vårt kostnadsfria Quickchat AI Agent-plugin, klistra in ditt Scenario ID, så visas Widgeten automatiskt utan någon temakod att redigera.
• Shopify – lägg till Widgeten via din butiks Theme Editor. Se Shopify-guiden.
• Webflow, Wix och andra – kopiera en kodsnutt och klistra in den i din sajtbyggares sektion för anpassad kod eller inbäddning, helst före den avslutande </body>-taggen.
• Dela en länk istället – installera ingenting; dela länken till din hostade Chatsida.
• Installera manuellt med kod – kopiera den råa Widget- eller Embed-kodsnutten och klistra själv in den i din HTML.

Varje metod öppnar en fokuserad panel med steg-för-steg-instruktioner som bara visar den kod eller det ID som behövs.

Ditt Scenario ID finns högst upp på fliken Installera som ett kopierbart fält. Det är identifieraren som plugins och API:et behöver, så kopiera det härifrån varje gång ett installationssteg ber om det.

Installera manuellt med kod

Om du hanterar din egen HTML, expandera Installera manuellt med kod på fliken Installera och:

1. Kopiera Widget-kodsnutten.
2. Öppna sidans HTML-fil, eller din webbplatsbyggares kodredigerare.
3. Klistra in kodsnutten strax före den avslutande </body>-taggen på alla sidor där Widgeten ska visas.

Behöver du hjälp?

Inte utvecklare? Fliken Installera har två genvägar under Behöver du hjälp?:

• Be AI om hjälp – öppnar den inbyggda assistenten, förifylld med en fråga om att lägga till Agenten på din webbplats.
• Mejla instruktioner till en utvecklare – skickar en kollega allt hen behöver (Widget-kodsnutten, ditt Scenario ID och en länk till den här guiden) så att de kan installera den åt dig.

För mer 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 håller åtkomststyrningarna i en hopfällbar sektion, Tillgänglighet och åtkomst. Expandera den för att hitta två styrningar som gäller din distribution:

Widget- och inbäddningsåtkomst

Brytaren högst upp i Tillgänglighet och åtkomst. 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.
• Dölj 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:

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.

Tip

Anpassade parametrar med snake_case-namn (t.ex. order_id, customer_tier) kan injiceras direkt i API Actions som {{metadata_order_id}}, {{metadata_customer_tier}} osv. Se Variabler för AI Action för detaljer.

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

1. Hämta Embed-koden

   • Logga in i Quickchat AI-appen.
   • Gå till Kanaler → Din webbplats i vänsterkolumnen.
   • Klicka på fliken Installera och expandera sedan Installera manuellt med kod.
   • Kopiera Embed-kodsnutten (den inkluderar både <div id="quickchat-embedded">-containern och loader-skriptet).

2. Öppna sidans HTML-fil eller webbplatsbyggarens kodredigerare.

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