Shopify-assistent ontwerp en frontend

INHOUDSOPGAVE

Configuratie van assistentontwerp

Het tabblad Chatontwerp stelt je in staat om de visuele weergave van de chatwidget volledig aan te passen, zodat deze naadloos aansluit bij de branding van je winkel.

Basisidentiteit en positionering

Identiteit: U kunt de “Assistentnaam” definiëren (bijv. “AI-assistent”) die in de koptekst verschijnt, en optioneel een “Assistent-avatar-URL” opgeven om een aangepast logo of afbeelding naast de naam weer te geven.

Positionering: Gebruik de vervolgkeuzelijst “Positie op het scherm” om te kiezen waar de widget op uw winkel wordt weergegeven (meestal Rechtsonder).

Lay-out en afmetingen

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

Pas de algehele “Chatbreedte” aan (bijv. 400px) en de “Maximale chat hoogte” (bijv. 50vh).

Fijn-afstemming van de afstand met “Messages padding” en pas de kromming van de interface aan met radius-instellingen zoals “Messages container radius” (18px) en “Chat window radius” (12px).

Beheer de typografiegrootte met instellingen voor “Chat lettergrootte,” “Chat header tekstgrootte,” en “Chat header pictogramgrootte”.

Kleurenthema

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

Achtergronden: Pas de primaire “Chatachtergrond” (#FFFFFF), de “Achtergrond van klantbericht” en de “Achtergrond van assistentbericht” (#000000) aan. Je kunt ook specifieke secties tinten, zoals de “Achtergrond van welkomsttekstvak” of “FAQ-achtergrondkleur” (#F9FAFB).

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

Veelgestelde vragen

Op het tabblad FAQ kunt u vooraf geschreven vragen maken die verschijnen voordat de gebruiker zelfs maar zijn eerste bericht typt. Dit helpt veelvoorkomende vragen direct op te lossen zonder dat er AI-generatie nodig is.

Klik op “+ FAQ toevoegen” om een nieuw item aan te maken.

Voer voor elk item de algemene “Vraag” in (bijv. “Kunt u het product naar de VS verzenden?”) en formatteer het statische “Antwoord” met behulp van de rich text-editor (vet, cursief, onderstreept, doorgestreept).

U kunt slepen en neerzetten om de vragen opnieuw te ordenen of de potlood- en prullenbakpictogrammen gebruiken om ze te bewerken of te verwijderen.

Snelle links

Op 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 winkelpagina's.

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

Links toevoegen: Klik op “+ Link toevoegen” om een nieuwe knop te maken. Geef een “Linktitel” op (zoals “WhatsApp” of “E-mail”) en voer de exacte “Link-URL” in (gebruik standaardformaten zoals mailto: voor e-mails of directe telefoonnummers).

Pictogrammen: U kunt kiezen uit een ingebouwde bibliotheek met vectorpictogrammen (zoals een envelop, telefoon, wereldbol of kalender) om de link visueel weer te geven. Als alternatief kunt u 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 krijg gratis installatie van ons team. 

Gebruik de volledige service voor slechts $1.