Configuring the Web Widget is a central part of the customer support strategy. This is where the customer's first digital point of contact is designed, and the widget acts as a primary tool for guiding, helping and streamlining the support process. Through the targeted configuration of ticket forms, deflection mechanisms, bot behaviour and entry points, a coherent and helpful experience can be created that meets the customer's needs early in the journey.
What is the Web Widget?
The Web Widget is a dynamic and interactive chat and help widget that is integrated on a website. It acts as a digital receptionist and is available to visitors. For customers, the widget is a direct channel for getting help, finding answers and getting in touch with relevant people. The widget makes it possible to:
- Start a real-time conversation via chat or asynchronous messaging.
- Search directly in the Help Center to find relevant articles and guides.
- Create a support ticket with the necessary information.
- Get instant help from bots that can answer questions and provide further guidance.
Core components of the Web Widget
To make the most of the widget's potential, it is important to know its core components. Each part can be fine-tuned to support an optimal user journey.
1. Chat/Messaging button
This is the primary entry point for customers who want direct contact. The button acts as an invitation to dialogue.
- Visibility and placement: You can control when and where the button is shown, and it can be placed strategically (typically in the bottom right or left).
- Proactive triggers: The button can be configured to open automatically with a message based on user behaviour (e.g. time on a page or an attempt to leave the page).
- Visual customisation: Colours, icons and animations can be customised so that they match the brand and are eye-catching without being disruptive.
2. Help Center search
This component acts as a first line of defence against unnecessary tickets and supports self-service.
- Intelligent search and suggestions: As the customer types, the widget suggests relevant articles, which often solves the problem before a conversation starts.
- Contextual deflection: The widget can show articles that are relevant to the specific page the customer is on.
- Reduced support volume: When it is easy to find answers on your own, the number of incoming enquiries is reduced, and agent time is freed up.
3. Contact form
When self-service is not sufficient, the contact form ensures that the necessary information is collected from the start.
- Dynamic form selection: Based on the customer's answers, different forms can be presented (e.g. technical support vs. invoice questions).
- Custom fields: Relevant data can be collected, which minimises back-and-forth communication.
- Prefilled information: For logged-in users, name, email and other relevant details can be filled in automatically to make the process faster.
4. Bot integration
Bots act as round-the-clock assistants, so that customers can get help at any time.
- AI agents and Flow Builder: Bot flows can be built to answer frequently asked questions, collect information and route the customer to the relevant department or agent.
- Intent matching: The bot analyses the enquiry in order to understand the need and deliver relevant help.
- Seamless escalation: If the bot cannot solve the problem, a handover to an agent is ensured with the conversation history intact.
In-depth configuration options
Zendesk's platform makes it possible to fine-tune the widget's behaviour and appearance.
Visibility rules
You can control precisely when and for whom the widget is visible, in order to ensure a relevant and non-intrusive experience.
- Always visible: The widget is constantly available to all visitors.
- Hide on specific pages: The widget can be hidden on pages where it is not needed (e.g. login pages or marketing landing pages).
- Show only on specific pages: The widget can be targeted at support sections or pricing pages, where the need for help is typically greatest.
- Based on user status: Different options can be shown for logged-in users versus guests, or based on subscription type to offer VIP support.
Visual design and branding
The widget should appear as a natural part of the brand and not as a third-party solution.
- Colours and theme: Primary and secondary colours, text colours and backgrounds can be customised so that they match the visual identity.
- Branding elements: A logo can be added, and typography can be adjusted to ensure a consistent experience.
- Positioning and animation: The placement and the opening/closing animations can be chosen so that they fit the website's design.
Behaviour settings
The user journey in the widget can be designed by controlling the order and availability of features.
- Order of options: You can prioritise whether the customer first sees "Search the Help Center", "Chat with us" or "Send a message", based on the deflection strategy.
- Contact options: You can choose which channels are available, e.g. chat during opening hours and a contact form outside opening hours.
- Proactive messaging: Proactive messages can be written and scheduled to engage users and guide them towards a solution.
Strategic best practices
To maximise the value of the Web Widget, the following principles can be applied.
1. Clear and action-oriented entry points
The customer should quickly be able to understand what can be achieved.
- Use active language such as "Chat with an expert" instead of "Chat".
- Be specific: "Get help with your invoice" is more precise than "Contact us".
- Make sure the button is easy to recognise and interact with.
2. The deflection-first strategy
Self-service is prioritised, as it is typically faster for the customer and more efficient for support.
- Show the Help Center search as the first option.
- Use bots to answer simple questions and guide customers to relevant articles.
- Make creating a ticket the last step rather than the first.
3. Seamless brand integration
The widget should be experienced as an integrated part of the brand.
- Colours, fonts and logo should match the website.
- The tone of voice in bot messages and proactive prompts should reflect the brand persona.
- The experience should be consistent and professional.
4. Optimisation for mobile
A significant proportion of customers access via mobile devices.
- Make sure the widget is responsive and works on smaller screens.
- Buttons and text fields should be large enough to operate with fingers.
- Consider a full-screen mode for chat on mobile for a better experience.
5. Thorough testing
Changes should be tested from the customer's perspective before launch.
- Go through the entire flow: Can a customer find an article, start a chat and create a ticket?
- Test across browsers (Chrome, Firefox, Safari) and devices (desktop, tablet, mobile).
- A/B test messages or configurations to assess what gives the best results.
Developing an effective deflection strategy
A successful deflection strategy is proactive and intelligent.
1. The Help Center as the primary resource
The knowledge base is made the most attractive option.
- By presenting search first, customers are encouraged to find answers themselves.
- Proactive article suggestions based on navigation can solve problems before they arise.
- This can reduce ticket volume markedly and provide quick clarification.
2. Intelligent bot assistance
Bots can be used as more than simple answer functions.
- Bots can act as triage by asking follow-up questions to clarify the real problem.
- Bots can solve simple, repetitive tasks such as "Reset password" or "Where is my order?".
- Bots can collect information before handover to an agent, which saves time.
3. Progressive disclosure of contact options
Contact options can be presented in layers rather than all at once.
- Start with the Help Center: "Perhaps the answer can be found here?"
- Involve the bot: "What is the enquiry about?"
- Offer the contact form: "If the answer cannot be found, a case can be created here."
This guided process ensures that the customer only reaches a ticket when it is necessary.
Troubleshooting and common challenges
Even a good configuration can present challenges. Below, an approach to troubleshooting is described.
Problem: The widget does not appear on the website.
- Solution: Verify that the visibility rules are configured correctly. Then check that the widget script is implemented correctly on the relevant pages, and that JavaScript conflicts are not blocking the loading.
Problem: The wrong contact form is shown to the customer.
- Solution: Review the logic for dynamic form selection in Zendesk Guide. Check that the conditions and flow are set up correctly, and that the relevant forms are active and linked to the widget.
Problem: The bot does not respond or gives irrelevant answers.
- Solution: Review the bot flows in Flow Builder for errors, missing branches or outdated answers. Verify that the bot is active and correctly linked to the widget. The bot should be continually trained and updated based on real customer conversations.
Next steps: implementation and optimisation
Configuring the Web Widget is an ongoing process and not a one-off project.
- Strategy workshop: Define what customers should be able to achieve via the widget, and how it supports overall business goals.
- Technical configuration: Implement the chosen settings for visibility, design, behaviour and bot flows.
- User-centred testing: Test from the customer's perspective to ensure that the functionality and experience are intuitive and helpful.
- Ongoing monitoring and analysis: Track key figures such as the deflection rate, CSAT score, number of tickets created and chat duration.
- Iterative improvement: Adjust the configuration continuously based on data and feedback from customers and agents to optimise performance and the customer experience.