Presenteren: de widget op je echte site tonen en de code overdragen

Les 6 van 11 · Presenteren. Je toont de widget in je echte site met het Lab uit les 3, en geeft de insluitcode aan je developer.

Les 6 van 11 · Presenteren. Je toont de widget in je echte site met het Lab uit les 3, en geeft de insluitcode aan je developer.

Het scenario

Je team wil de chat in een pagina van je website, bijvoorbeeld in een blok op de contactpagina, in plaats van als zwevende knop. Voordat je webdeveloper het bouwt, wil het team het op de echte site zien. Daarna heeft je developer code nodig die past bij wat het team heeft goedgekeurd.

Doel: je team keurt de widget op je live pagina goed, en je developer krijgt de bijbehorende code.

Wat je nodig hebt

• De Web Widget-inspector aan voor je website, met je ontwerp in het Lab.
• Een leeg element op de pagina met een vaste hoogte, dat de widget kan vullen.
• Een manier om code naar je webdeveloper te sturen.

Stappen

1. Open de pagina en het tabblad Lab van de inspector. Met Lab op deze site aan toont de echte widget je ontwerp. Het Lab staat in Het Lab in de Web Widget-inspector.
2. Open Embedded mode testen. Kies onder Indeling voor Volledige widget, of voor Gesplitste weergave om de gesprekkenlijst en het gesprek op twee plekken te zetten.

3. Klik op Plek kiezen en klik op het lege blok op de pagina. ↑ kiest een groter element, ↓ gaat terug, Enter kiest en Esc annuleert. Het Lab waarschuwt als het element te laag of te smal is voor de widget, of al inhoud heeft.

   

4. Klik op Test starten. De pagina herlaadt met de widget in het blok, en het Lab meldt De widget staat embedded op de pagina, alleen in deze browser.

5. Laat de pagina op je scherm zien aan je team, in de zaal of via schermdelen. Wie je site verder opent, ziet nog steeds de zwevende widget.
6. Kopieer de code voor je developer. Klik onder Embedcode op Kopiëren: de code zet autorender uit, daarna volgt een commentaarregel die aangeeft waar je Web Widget-fragment uit het Beheercentrum komt, met de widgetsleutel erbij zodat je weet om welke het gaat, en dan de render-aanroep voor het element dat je koos. Vraag je developer het fragment uit het Beheercentrum op die regel te zetten. Klik daarna bovenaan het Lab op Code kopiëren voor de zE-aanroepen met je customization.
7. Geef je developer mee wat het Lab onder Embedcode zegt: autorender moet uit staan voordat de snippet laadt; de render-aanroep kan er direct na komen. De kant van Zendesk staat in De Web Widget instellen en tonen.
8. Klik op Test stoppen om de zwevende widget terug te zetten. Zet Lab op deze site uit als het team het heeft gezien. Hoe je de inspector uitzet, staat in Aan de slag met de Web Widget-inspector.

Waarom dit belangrijk is

• Je team beoordeelt je echte pagina, met eigen lettertypen, ruimte en inhoud, in plaats van een ontwerp.
• Je developer begint met code die past bij wat het team zag, in plaats van het na te bouwen uit een beschrijving.
• De widget in de test is de echte widget van je site, dus een gesprek daarin is een echt gesprek. Het komt terecht bij wat je Web Widget nu beantwoordt. Wil je de antwoorden van je AI-agent laten zien voordat hij live is, gebruik dan de presentatiemodus uit les 5.
• Voor een zwevende widget heeft de preview eigen code: Insluitcode kopiëren en Alleen zE-aanroepen kopiëren in de Web Widget-aanpassingen. Zie De insluitcode van de Web Widget kopiëren.