Planning: match the preview to your widget and brand

Updated

Lesson 3 of 11 · Planning. You copy your website's widget design into the preview from lesson 1, and check that your brand colours are readable.

The scenario

Your website already has the Zendesk Web Widget, with your own colours set in the page's code. Before go-live, you want to judge your AI agent's answers in that design, not in the test widget. Your brand team also asks for a start screen with suggested questions, and wants the chat to stay readable in the brand colours.

Goal: the preview shows your AI agent in the widget design your customers will get, and you know the colours are readable.

What you need

  • Your website with the Web Widget, open in Chrome.
  • To compare with your brand's settings in Admin Center: the Admin role. The inspector shows those settings to admins only.

Steps

  1. On your website, click the extension's icon in the Chrome toolbar. Under This website it reads Zendesk Web Widget found, followed by your Zendesk account. Click Inspect this widget and allow the site when Chrome asks. How to switch the inspector on is in Getting started with the Web Widget inspector.

    In the example, the extension window from the Chrome toolbar on the website of the fictional shop Bluebird Bikes. Under This website it reads Zendesk Web Widget found, bluebirdbikes.zendesk.com, with the button Inspect this widget and the note that Chrome asks once for permission for this site.

  2. The Web Widget inspector opens on the page. Open the Lab tab and click Start from the site's customization: the editor now holds what your site sets with zE. Switch on Lab on this site to see your changes on the real widget, only in your browser.

  3. Enter your brand colours under Theme colors. Further down, Contrast lists the widget's five text and background colour pairs with their ratio, and marks a pair Large text only or Too low. Normal text needs at least 4.5:1. The Lab is described in The Lab in the Web Widget inspector.

    In the example, the Lab tab of the Web Widget inspector for the fictional shop Bluebird Bikes, bluebirdbikes.zendesk.com. Under Contrast are five colour pairs, each with a sample, its colours and where they come from, the ratio and a tag: primary and onPrimary 13.28:1 AAA, action and onAction 5.35:1 AA with the lab colour #B5482A. Below it, the Code section shows the zE customization call with a Copy button.

  4. Under Window, try Style: Default (bubbles) or Minimalistic. Not sure what a setting does? Hover over the i next to it for a short animation; see Seeing what a setting does.

    Style: the same conversation in bubbles and in the minimalistic style.
  5. Click Open in AI agent preview. The extension copies your site's widget key and customization, with your lab changes, to the preview of your Zendesk account, and opens the AI agents dashboard in a new tab.
  6. Start a test of your AI agent and choose Show as Web Widget. The preview says once that it uses the widget settings copied from your website.

  7. Open Preview settings, then Web Widget customization, and go to Pre-conversation screen. Set Show the screen to on, fill in Title and Subtitle, and put your Suggested prompts on separate lines, for example: Where is my order? The preview shows the screen until the first customer message. Every option is in Web Widget customisation options.

    Suggested prompts: three questions on the pre-conversation screen.

  8. If your customers can have several conversations, set Conversations in the preview settings to Several conversations. The back button in the header opens the conversation list. Its options, such as Group by date, are under Conversation list in the customization.

    Conversations: one conversation, and several conversations with the conversation list.

Why it matters

  • After step 5, the preview uses the same widget key and customization as your website. Your AI agent's answers then appear in the design your customers will see, and you judge them before go-live instead of after.
  • The pre-conversation screen is marked Undocumented. It is not in Zendesk's developer documentation, so it can change or disappear without notice.
  • Colors for this account in the preview settings only previews Admin Center colours and is not part of the embed code. Theme colors in the customization are.
How the contrast check works

The check takes the colours from Admin Center, puts the site's customization on top, and then your lab colours. For each of the five text and background pairs it computes the WCAG contrast ratio. Normal text needs at least 4.5:1; 3:1 is only enough for large text and icons. A customization call with an invalid colour is left out, because the widget ignores that whole call.

Was this article helpful?

0

Still stuck?

Our support team will take a look with you.

Related articles

Comments

0 comments

Please sign in to leave a comment.