Should customers chat on your website or in Messenger?

Choose where the conversation should happen before choosing an installation method. For a small shop, ask whether the customer should keep viewing a product while asking a question. For a service business, consider where your team will actually read and answer incoming messages.

A website chat widget is the small conversation interface visitors open on a page. Dialogflow Messenger provides a customizable window that appears at the lower right when opened. Check that position against your existing page layout. Google describes the window's behavior here.

The supplied Meta page describes a different set of options. Its Message Us Plugin opens a conversation in Messenger, while Send to Messenger collects permission for follow-up messages. Choose according to the intended action, using Meta's descriptions.

Write the chosen action in your project brief. If you need help deciding where questions arise, work through the customer journey mapping guide before commissioning the widget.

What should you prepare before touching the website?

Prepare an answer sheet that a colleague can review. Give each topic an approved response, a boundary, and a named owner. Use this as the acceptance checklist for whoever configures the bot.

Build a small answer pack

• List recurring questions in the customer's own words.
• Write the answer your business is willing to stand behind.
• Identify details needed before answering.
• Specify when the conversation should go to a person.
• Assign someone to review changes to the information.

Hypothetical example: a furniture shop wants help answering delivery questions. Prepare separate entries for delivery areas, access requirements, and scheduling. Instruct the builder to avoid promising a delivery date unless the business can actually confirm it.

For an appointment business, distinguish explaining availability from confirming a booking. Include the exact next step you want the visitor to take. Use the appointment booking guide when planning that separate process.

Define what “AI” means in your brief

AI means artificial intelligence. For this project, describe the job in ordinary language: help visitors get answers from approved business information. Avoid asking for an assistant that can answer anything.

Ask your implementer to demonstrate the answer behavior separately from the website installation. The integration instructions below are not a complete guide to creating that behavior. Do not accept a working chat bubble as evidence that customer questions have been handled correctly.

For each response, request a direct answer followed by any necessary condition and a useful next step. Keep promotional paragraphs out of simple support answers. When reviewing the pack, read the response aloud and remove anything you would not naturally say to a customer.

How do you install the Dialogflow Messenger widget?

Start with a configured Dialogflow ES agent and test the integration before adding it to a public page. Google's documented sequence is to enable Messenger, copy its code, and use the built-in test. Follow the official setup and embedding instructions.

1. Open the appropriate agent in the Dialogflow ES console.
2. Select Integrations from the left menu.
3. Open Dialogflow Messenger.
4. Choose the environment to use and click Enable.
5. Copy the supplied embed code.
6. Use Try It Now to open a test conversation.
7. Place the code on a website test page.

Google specifies that the script and df-messenger elements belong inside the page's body. It also specifies a viewport meta setting for responsive layouts. Pass these requirements to your website maintainer using the Embed section.

Give the website maintainer a complete brief

Send the copied code, test page, desired title, approved questions, and acceptance checklist together. Ask them to show a visitor opening the window, sending a message, receiving a reply, and closing it. Request a clear way to remove the installation if testing fails.

For WordPress or another website builder, ask where this particular site's custom code belongs. Avoid guessing a universal menu path. Review the test page yourself before authorizing the same installation across additional pages.

If a supplier handles customer support chatbot setup, separate the deliverables in the quote. Ask for distinct descriptions of answer configuration, website installation, design adjustments, and ongoing changes. Approve work against those deliverables rather than a screenshot of the finished window.

How should you customize the chat window?

Make the title clear and the text easy to read before changing decorative details. Google documents chat-title for the heading and chat-icon for the opening button image. Colors use CSS variables, which are named website styling settings. Use the HTML and CSS customization sections.

Request these design checks

• Use a title such as “Store questions” that explains the purpose.
• Keep text clearly readable against its background.
• Check the chat button beside basket and contact controls.
• Try typing a longer message on a phone.
• Check that closing the window is straightforward.

The documented df-messenger-button-titlebar-color setting controls the button and title bar color. The df-messenger-bot-message setting controls the background of agent messages. Give your maintainer these specific names from Google's variable list.

I recommend starting with the window closed and letting the visitor open it. Ask a colleague to complete an ordinary shopping task with the widget present. Record anything the window obscures or makes awkward, then adjust the design before launch.

What must you test before customers use it?

First check whether the documented limits fit your project. Google marks the ES Messenger integration as Preview, supports only the agent's default language, and warns that unauthenticated people may query the agent. It says to use this integration only for public agent information. Review the limitations and public-data warning.

For this starting setup, restrict the answer pack to information you would publish on your website. Keep private customer records outside the pilot. If you need several languages, require a demonstrated solution instead of assuming that changing a label provides multilingual support.

Write the expected result before each test

• Ordinary question: ask about opening hours.
• Incomplete question: ask “Can you do tomorrow?”
• Alternative wording: repeat a question informally.
• Unknown subject: ask about a service you do not offer.
• Human request: ask to speak to an employee.
• Private information: request another customer's order details.

For each case, compare the response with your approved answer or escalation rule. Describe failures precisely: wrong information, unclear wording, missing contact option, or unreadable text. Fix the issue and repeat the affected conversation.

Do not describe a contact button as live support unless you have arranged who will answer and when. Test the destination yourself. A message claiming that someone has been notified should only be accepted after the intended recipient confirms receipt.

How can you launch a useful first version this week?

Use a small launch plan with named responsibilities. The schedule below is a suggested working sequence, not a promise about implementation time. Keep the launch pending if answers or contact arrangements remain unfinished.

1. Choose one recurring customer problem and its owner.
2. Approve the answers and boundaries.
3. Install the widget on a test page.
4. Review design and difficult conversations with a colleague.
5. Release it on a selected page and review actual questions.

Keep a simple review sheet: question, response, expected response, correction, and owner. Do not count an abandoned conversation as a resolved problem. Ask whether the visitor received an accurate answer and a usable next step.

For feedback after a conversation, plan a brief question using the customer satisfaction survey guide. If visitors prefer another channel, consider the WhatsApp agent planning guide as a separate project.

Keep financial review equally practical. Request the setup work, ongoing service, and future content updates as separate items. Use the small business cost review guide to decide what deserves continued spending.