Plannen: de preview afstemmen op je widget en merk

Les 3 van 11 · Plannen. Je neemt het widgetontwerp van je website over in de preview uit les 1, en controleert of je merkkleuren leesbaar zijn.

Les 3 van 11 · Plannen. Je neemt het widgetontwerp van je website over in de preview uit les 1, en controleert of je merkkleuren leesbaar zijn.

Het scenario

Je website heeft de Zendesk Web Widget al, met je eigen kleuren in de code van de pagina. Voor de livegang wil je de antwoorden van je AI-agent in dat ontwerp beoordelen, niet in de testwidget. Je merkteam vraagt ook om een startscherm met voorgestelde vragen, en wil dat de chat leesbaar blijft in de merkkleuren.

Doel: de preview toont je AI-agent in het widgetontwerp dat je klanten krijgen, en je weet dat de kleuren leesbaar zijn.

Wat je nodig hebt

• Je website met de Web Widget, open in Chrome.
• Om te vergelijken met de instellingen van je merk in het Beheercentrum: de rol Admin. De inspector toont die instellingen alleen aan admins.

Stappen

1. Klik op je website op het pictogram van de extensie in de werkbalk van Chrome. Onder Deze website staat Zendesk Web Widget gevonden, gevolgd door je Zendesk-account. Klik op Deze widget inspecteren en sta de site toe als Chrome erom vraagt. Hoe je de inspector aanzet, staat in Aan de slag met de Web Widget-inspector.

   

2. De Web Widget-inspector opent op de pagina. Open het tabblad Lab en klik op Begin met de customization van de site: de editor bevat nu wat je site met zE instelt. Zet Lab op deze site aan om je wijzigingen op de echte widget te zien, alleen in jouw browser.

3. Vul je merkkleuren in onder Themakleuren. Verderop toont Contrast de vijf tekst- en achtergrondparen van de widget met hun verhouding, en markeert een paar met Alleen grote tekst of Te laag. Gewone tekst heeft minstens 4,5:1 nodig. Het Lab staat in Het Lab in de Web Widget-inspector.

   

4. Probeer onder Venster de Stijl: Standaard (tekstballonnen) of Minimalistisch. Weet je niet wat een instelling doet? Beweeg over de i ernaast voor een korte animatie; zie Zien wat een instelling doet.

5. Klik op Openen in AI agent-preview. De extensie kopieert de widgetsleutel en de customization van je site, met je labwijzigingen, naar de preview van je Zendesk-account, en opent het AI agents-dashboard in een nieuw tabblad.
6. Start een test van je AI-agent en kies Toon als Web Widget. De preview meldt één keer dat hij de gekopieerde widgetinstellingen van je website gebruikt.

7. Open Preview-instellingen, dan Web Widget-aanpassingen, en ga naar Scherm vóór het gesprek. Zet Scherm tonen aan, vul Titel en Ondertitel in, en zet je Voorgestelde prompts op aparte regels, bijvoorbeeld: Waar is mijn bestelling? De preview toont het scherm tot het eerste bericht van de klant. Elke optie staat in De aanpassingsopties van de Web Widget.

8. Kunnen je klanten meerdere gesprekken hebben, zet dan Gesprekken in de preview-instellingen op Meerdere gesprekken. De terugknop in de koptekst opent de gesprekkenlijst. De opties daarvoor, zoals Groeperen op datum, staan onder Gesprekkenlijst in de aanpassingen.

Waarom dit belangrijk is

• Na stap 5 gebruikt de preview dezelfde widgetsleutel en customization als je website. De antwoorden van je AI-agent verschijnen dan in het ontwerp dat je klanten te zien krijgen, en je beoordeelt ze vóór de livegang in plaats van erna.
• Het scherm vóór het gesprek is gemarkeerd als Ongedocumenteerd. Het staat niet in de developerdocumentatie van Zendesk, dus het kan zonder aankondiging veranderen of verdwijnen.
• Kleuren voor dit account in de preview-instellingen is alleen een voorbeeld van de kleuren uit het Beheercentrum en komt niet in de insluitcode. Themakleuren in de aanpassingen wel.