Step 1: Log in and Access the Widget Builder

• Go to https://services.tochat.be

• Use your email and password to log in to your Tochat.be dashboard

• On the left sidebar, click on “Widgets”

• Then click “Create and Edit” to begin building a new widget

• You’ll land on the Widget Builder page, where all customization happens

Step 2: Name Your Widget and Add Branding

• At the top of the page, locate the field: “Widget Name”

  • Example: Enter a clear business name like “Peter’s Bakery Widget”

• Click the Upload Logo button

  • Select your company logo image (JPG, PNG, or GIF)

  • This logo will show at the top of your widget

• Add your Welcome Header Message

  • Example: “Place your order with us via WhatsApp!”

  • This message appears in the widget’s top header

• Add your Widget Button Text

  • Example: “Chat with us now!”

  • This text shows on the clickable button that launches the chat

• Click Save to store these settings

Step 3: Add an Agent (The Person Who Will Receive the WhatsApp Messages)

• Scroll down to the “Agents” section

• Click “+ Add Agent”

• Fill in the required details:

  • Name: Example: “Peter”

  • Phone number: Enter the full number with country code (e.g., +34655111222)

  • Agent job title: Example: “Bakery Manager”

  • Profile photo: Upload a headshot or company icon (this shows in the widget)

  • Default Message: This is what users will send when clicking—Example:

    • “Hi, I’d like to place an order for a birthday cake.”

  • Email address (optional): For receiving notifications

• Click Update to save this agent

Step 4: Preview the Widget

• On the top menu bar of the builder, click “Preview”

• Test the widget by clicking the button

  • Does it show your header message and logo?

  • Does clicking on the agent redirect to WhatsApp with the correct message?

• If needed, go back and edit the text or image in previous steps

Step 5: Copy and Install the Widget on Your Website

• Click on the “Install” tab in the top menu

  • You’ll see a script like:

    <script src=”https://widget.tochat.be/bundle.js?key=your-widget-key”></script>

• Click “Copy” to copy the code

• Paste this code into your website:

  • If using WordPress:

    • Go to Appearance > Theme File Editor > header.php

    • Paste the code just before the closing </head> tag

    • Save and update

  • If using Wix, Shopify, or other platforms:

    • Use their embed code blocks or custom HTML elements

• Visit your website and test the widget live

Step 6: Customize Design and Behavior

• Go back to the Widget Builder and click the “Design” tab

• Choose your widget layout:

  • Floating Button

  • Bubble

  • Full WhatsApp-style panel

• Change colors:

  • Match your brand with color pickers (button color, text color, etc.)

• Customize behavior:

  • Add a delay (e.g., show widget 5 seconds after page load)

  • Add entrance animation (e.g., bounce, slide, fade)

  • Enable/disabling the header or widget close button

• Click Save to apply changes

Step 7: Add a Pre-Chat Form (Optional but Recommended)

• Navigate to “Form” settings

• Enable “Show a Form Before Chat”

• Choose a template (e.g., “Sales”) or create your own fields

• Example custom form:

  • Question: “What type of cake are you looking for?”

  • Answer Type: Dropdown

  • Options: Chocolate, Vanilla, Wedding, Birthday

• You can add more fields:

  • Text input for name

  • Dropdown for delivery time

  • Checkbox for pickup option

• Choose whether fields are required or optional

• Click Save

Step 8: Add More Agents (If Needed)

• Repeat Step 3 for each additional team member

• Example:

  • Agent 2: “Anna – Customer Service”

  • Phone: +34655222333

  • Message: “Hi Anna, I need help with my delivery.”

• Each agent can have:

  • Their own title, message, number, and email

• The widget will display each agent with clickable options

Step 9: Add Social Links (Optional)

• Go to the “Social” section

• Paste in your URLs for:

  • Instagram

  • Facebook

  • Twitter

  • TikTok

• Important: If your goal is conversions via WhatsApp, don’t overload with social links—this can distract users

• Only include links that are useful for building trust (e.g., testimonials or reviews)

Step 10: Test the Widget on Desktop and Mobile

• Open your website on your computer and phone

• Click the widget:

  • Make sure it launches WhatsApp properly

  • Test all agent links

  • Try sending a message

• Adjust spacing or layout if it looks off on mobile

• Use Incognito Mode or another browser to test fresh

Step 11: Explore More Features or Create More Widgets

• Go back to Widgets > Create and Edit

• Try creating multiple versions:

  • Widget A for “Support”

  • Widget B for “Sales”

  • Widget C for “Spanish-speaking customers”

• Use A/B testing to see which version converts best

• Purpose of the Widget: The WhatsApp widget is a powerful tool to funnel leads from your website or social media directly to WhatsApp, enabling direct communication with customers.
• Flexibility: You can create unlimited widgets, customize them extensively, and tailor them to your business needs.
• Next Steps: Explore the platform’s academy for more advanced lessons on optimizing your widget and integrating it with your CRM or other tools.

If you have questions or need help, contact the support team or send a message to the platform’s WhatsApp number. Happy widget building!