Shopify Assistant ontwerp en frontend

INHOUDSOPGAVE

Assistent-ontwerpconfiguratie

Via het 'Chatontwerp' kunt u het uiterlijk van de chatwidget volledig aanpassen, zodat deze naadloos aansluit bij de huisstijl van uw winkel.

Basisidentiteit en positionering

Identiteit: U kunt de "Naam van de assistent" definiëren (bijvoorbeeld "AI-assistent") die in de header verschijnt, en optioneel een "URL voor de assistent-avatar" opgeven om een ​​aangepast logo of afbeelding naast de naam weer te geven.

Positionering: Gebruik het keuzemenu 'Positie op scherm' om te kiezen waar de widget in uw webwinkel wordt geplaatst (meestal rechtsonder).

Indeling en afmetingen

Je hebt nauwkeurige controle over de fysieke grootte en vorm van de chatinterface met behulp van pixels (px), viewporthoogte (vh) of rem-eenheden:

Pas de algemene "Chatbreedte" (bijv. 400px) en "Maximale Chathoogte" (bijv. 50vh) aan.

Verfijn de afstand met 'Opvulling voor berichten' en pas de kromming van de interface aan met behulp van radiusregelaars zoals 'Radius van berichtencontainer' (18px) en 'Radius van chatvenster' (12px).

Pas de typografie aan met de instellingen voor 'Lettergrootte chat', 'Tekstgrootte chatkop' en 'Picoongrootte chatkop'.

Kleurenthema's

De interface biedt uitgebreide hexcode-kiezers om elk element van het chatvenster aan te passen.

Achtergronden: Pas de primaire chatachtergrond (#FFFFFF), de achtergrond voor klantberichten en de achtergrond voor assistentberichten (#000000) aan. U kunt ook specifieke onderdelen een kleurtje geven, zoals de achtergrond van het welkomsttekstveld of de achtergrondkleur van de veelgestelde vragen (#F9FAFB).

Randen: Definieer de subtiele contouren voor het berichtveld, de FAQ-vakken en de links om een ​​samenhangend geheel te creëren.

Veelgestelde vragen

Met het tabblad FAQ kunt u vooraf opgestelde vragen maken die verschijnen nog voordat de gebruiker zijn of haar eerste bericht typt. Dit helpt om veelvoorkomende vragen direct te beantwoorden zonder dat er AI nodig is om antwoorden te genereren.

Klik op "+ FAQ toevoegen" om een ​​nieuw item aan te maken.

Voer voor elke vermelding de standaardvraag in (bijvoorbeeld: "Kunt u het product naar de VS verzenden?") en formatteer het statische antwoord met behulp van de rich text-editor (vetgedrukt, cursief, onderstreept, doorgehaald).

Je kunt de vragen verslepen om de volgorde te wijzigen, of de potlood- en prullenbakpictogrammen gebruiken om ze te bewerken of te verwijderen.

Snelle links

Via het tabblad Links kunt u directe navigatieknoppen toevoegen aan de onderkant van het welkomstscherm van de chat. Dit is ideaal om gebruikers door te verwijzen naar alternatieve ondersteuningskanalen of belangrijke pagina's in de webwinkel.

Rasterindeling: Definieer eerst hoe de links worden weergegeven door het aantal 'Rasterkolommen' te selecteren (bijvoorbeeld, als u dit op 3 instelt, worden ze in een horizontale rij weergegeven).

Links toevoegen: Klik op "+ Link toevoegen" om een ​​nieuwe knop te maken. Geef een "Linktitel" op (bijvoorbeeld "WhatsApp" of "Mail") en voer de exacte "Link-URL" in (gebruik standaardformaten zoals mailto: voor e-mailadressen of directe telefoonnummers).

Pictogrammen: U kunt een pictogram selecteren uit een ingebouwde bibliotheek met vectorpictogrammen (zoals een envelop, telefoon, wereldbol of kalender) om de link visueel weer te geven. U kunt ook de knop 'Bestand kiezen' onder 'Aangepaste afbeelding' gebruiken om uw eigen pictogram te uploaden.

Klaar om meer te verkopen op Shopify?

Installeer Liliwi in je Shopify-winkel en ontvang gratis installatiehulp van ons team. 

Gebruik de volledige service al vanaf $1.