Presenting: show the widget on your live site and hand over the code

Lesson 6 of 11 · Presenting. You show the widget inside your live site with the Lab from lesson 3, and hand the embed code to your developer.

Lesson 6 of 11 · Presenting. You show the widget inside your live site with the Lab from lesson 3, and hand the embed code to your developer.

The scenario

Your team wants the chat inside a page of your website, for example in a block on the contact page, instead of as a floating button. Before your web developer builds it, the team wants to see it on the real site. Afterwards, your developer needs code that matches what the team approved.

Goal: your team approves the widget on your live page, and your developer gets the matching code.

What you need

• The Web Widget inspector switched on for your website, with your design in the Lab.
• An empty element on the page with a fixed height, for the widget to fill.
• A way to send code to your web developer.

Steps

1. Open the page and the Lab tab of the inspector. With Lab on this site on, the real widget shows your design. The Lab is described in The Lab in the Web Widget inspector.
2. Open Test embedded mode. Under Layout, choose Full widget, or Split view to place the conversation list and the conversation in two places.

3. Click Pick a place and click the empty block on the page. ↑ picks a larger element, ↓ goes back, Enter picks and Esc cancels. The Lab warns when the element is too low or too narrow for the widget, or already has content.

   

4. Click Start test. The page reloads with the widget inside the block, and the Lab reads The widget renders embedded, only in this browser.

5. Show the page to your team on your screen, in the room or in a screen share. Anyone else who opens your site still sees the floating widget.
6. Copy the code for your developer. Under Embed code, click Copy: it sets autorender off, then a comment line marking where your Web Widget snippet from Admin Center goes, with the widget key so you know which one, and then the render call for the element you picked. Ask your developer to put the snippet from Admin Center on that line. Then click Copy code at the top of the Lab for the zE calls with your customization.
7. Tell your developer what the Lab says under Embed code: autorender must be off before the snippet loads; the render call can follow right after it. Zendesk's side of the widget is in Setting up and showing the Web Widget.
8. Click Stop test to put the floating widget back. Switch off Lab on this site when the team has seen it. How to turn the inspector off is in Getting started with the Web Widget inspector.

Why it matters

• Your team judges your real page, with its own fonts, spacing and content, instead of a mock-up.
• Your developer starts from code that matches what the team saw, instead of rebuilding it from a description.
• The widget in the test is your site's real widget, so a conversation in it is a real one. It reaches whatever answers your Web Widget today. To demo your AI agent's answers before it is live, use presentation mode from lesson 5.
• For a floating widget, the preview has its own code: Copy embed code and Copy zE calls only in the Web Widget customization. See Copying the Web Widget embed code.