How to Add a Hyperlink in Dialogflow

Your chatbot is answering questions. Users are engaged. And then someone asks for a link — and your bot dumps a raw, ugly URL into the chat window that nobody wants to click.

That’s a problem. Because a poorly delivered link doesn’t just look bad. It breaks the entire conversational flow you worked hard to build.

Here’s the thing: <strong>73% of buyers expect websites to feature a conversational assistant</strong> (Tidio). You’ve already won that battle by using Dialogflow. But if your bot can’t deliver clean, clickable hyperlinks, you’re leaving user experience — and conversions — on the table.

This guide shows you exactly how to add hyperlinks in Dialogflow, whether you’re working in Dialogflow ES or Dialogflow CX, using text responses, Markdown, or custom JSON payloads.

Let’s fix that broken link problem for good.

Why Hyperlinks in Dialogflow Matter More Than You Think

Before the how, the why matters.

Chatbots that use rich messaging elements — buttons, cards, and clickable links — consistently outperform plain-text bots. <strong>eCommerce businesses using rich chatbot responses achieve an average click-through rate of 40%</strong> (Master of Code). Compare that to static forms and raw text responses, and the gap is significant.

A hyperlink inside a Dialogflow response isn’t just cosmetic. It does three things:

It guides users to take the next step instead of leaving them to figure it out. It reduces friction at the most critical point in a conversation. And it keeps your bot feeling like a real product, not a proof of concept.

<strong>The global chatbot market hit $7.76 billion in 2024 and is projected to surpass $27 billion by 2030</strong> (Master of Code). The competitive bar is rising fast. Clean, interactive responses — starting with something as simple as a clickable link — are now table stakes.

Understanding How Dialogflow Handles Links

Here’s what trips most people up: Dialogflow does not have a single “add hyperlink” button. The method depends on two things — which version of Dialogflow you’re using, and which integration or platform you’re deploying to.

Dialogflow ES (Essentials) is the classic version. It supports text responses, platform-specific rich messages (for Google Assistant, Facebook Messenger, Slack, etc.), and custom JSON payloads.

Dialogflow CX (Customer Experience) is the newer, flow-based version. It supports plain text, Markdown in the Dialogflow CX Messenger, and richContent custom payloads for structured link cards.

Most integrations — especially web-embedded Dialogflow Messenger — support Markdown formatting, which means you can embed links directly in your text responses with standard Markdown syntax. Other integrations require custom payloads in JSON format.

Know your deployment target first. That choice dictates which method below applies to you.

How to Add a Hyperlink in Dialogflow ES Using a Text Response

This is the simplest route, and it works for integrations that render Markdown in text responses.

Step-by-step:

Go to the Dialogflow ES console and select your agent. Click on Intents in the left sidebar and open the intent where you want the link to appear. Scroll down to the Responses section.

Click the Text response field and type your message using standard Markdown link syntax:

Check out our pricing page here: [View Pricing](https://yourwebsite.com/pricing)

Click Save.

Whether this renders as a clickable link depends entirely on your front-end or integration. Many custom web integrations parse Markdown in text responses and render it as HTML anchor tags. The Dialogflow inline test console will not render the link as clickable — that’s expected. You need to test it through the actual integration.

Pro tip: Always test your link responses inside the real deployment environment, not just the Dialogflow console simulator. The console shows raw text only.

How to Add a Hyperlink in Dialogflow CX Using Markdown

Dialogflow CX Messenger explicitly supports Markdown in text responses. This makes embedding hyperlinks straightforward.

Step-by-step:

Open your Dialogflow CX console and navigate to your agent. Go to Build and select the Flow where the response should appear. Click on the Page containing the relevant fulfillment, then open the Fulfillment settings.

Under Agent responses, click Add dialogue option and choose Agent says. In the text field, use Markdown syntax:

Here’s the resource you requested: [Download the Guide](https://yourwebsite.com/guide)

Click Save and test via the Dialogflow CX Messenger integration by clicking Try it now in the Integrations section.

The link renders as a clickable anchor inside the chat widget. Clean. No raw URLs. No friction.

Important: To enable image rendering in Markdown (if you also need images), the url-allowlist attribute must be configured on your Messenger widget. For hyperlinks alone, no additional configuration is required.

How to Add a Hyperlink via Custom Payload in Dialogflow ES

When you’re working with custom integrations — your own website chat widget, mobile app, or third-party platforms — a custom JSON payload gives you full control.

Custom payloads are not processed by Dialogflow itself. You handle the rendering in your own front-end code. This means you define exactly what the link looks like and how it behaves.

Step-by-step:

In the Dialogflow ES console, open the relevant intent and scroll to the Responses section. Click the + icon and select Custom Payload from the dropdown.

Paste in your JSON. Here’s a basic structure for a clickable link response:

{

  “richContent”: [

    [

      {

        “type”: “button”,

        “icon”: {

          “type”: “chevron_right”,

          “color”: “#2A5AF8”

        },

        “text”: “Visit Our Website”,

        “link”: “https://yourwebsite.com”,

        “event”: {}

      }

    ]

  ]

}

Click Save. Your front-end application receives this payload in the fulfillmentMessages array of the Dialogflow API response. Parse it and render the link button in your UI.

Key constraint: Custom payload JSON must be limited to 24 levels of depth. Keep your structure clean and shallow.

How to Add a Clickable Hyperlink in Dialogflow CX Messenger Using richContent

For Dialogflow CX Messenger specifically, Google provides a structured richContent format that renders beautiful, interactive link cards natively — no custom front-end code required.

Step-by-step:

In your Dialogflow CX fulfillment, add a Custom payload response. Use the info response type, which creates a card with a clickable link:

{

  “richContent”: [

    [

      {

        “type”: “info”,

        “title”: “Learn More”,

        “subtitle”: “Visit our resource library for detailed guides and case studies.”,

        “anchor”: {

          “href”: “https://yourwebsite.com/resources”

        }

      }

    ]

  ]

}

What this produces: A clean card inside Dialogflow Messenger with a title, subtitle, and a clickable link. The user taps the card to open the URL.

You can also combine the info response with an image type inside the same inner array to create a card with both a visual and a link. However, note that clicking the image does not trigger the link — only clicking the info card does. Place the info response below the image response in the array to keep the UX clear.

Adding Link Buttons Using the Button Response Type (CX Messenger)

If you want a standalone button that navigates to a URL — rather than a card — the button response type is your best option in Dialogflow CX Messenger.

{

  “richContent”: [

    [

      {

        “type”: “button”,

        “icon”: {

          “type”: “open_in_new”,

          “color”: “#2A5AF8”

        },

        “text”: “Book a Free Consultation”,

        “link”: “https://yourwebsite.com/book”

      }

    ]

  ]

}

This renders as a clean, tappable button with an icon. It links directly to any URL you specify. Use this when you want a single strong call to action — not a multi-line card.

<strong>82% of consumers say they would use a chatbot</strong> (Tidio). That’s an enormous audience interacting with your bot every day. Button-style links consistently drive higher action rates than plain-text URLs because they look intentional, not accidental.

Sending Hyperlinks via Webhook Fulfillment

If your Dialogflow agent uses a webhook (Cloud Functions or external server), you can return hyperlinks dynamically — based on user inputs, session data, or real-time lookups.

In a webhook response, include the richContent payload inside fulfillmentMessages:

{

  “fulfillmentMessages”: [

    {

      “payload”: {

        “richContent”: [

          [

            {

              “type”: “info”,

              “title”: “Your Order Status”,

              “subtitle”: “Click below to track your shipment in real time.”,

              “anchor”: {

                “href”: “https://yourwebsite.com/track?order=12345”

              }

            }

          ]

        ]

      }

    }

  ]

}

Dynamic links are powerful for use cases like order tracking, personalized resource recommendations, appointment confirmations, and document delivery. Instead of a static URL hardcoded in the console, you generate the right link at the right moment — based on exactly what the user just told your bot.

<strong>Chatbots that use personalized, contextual responses deliver up to 3x better conversion rates compared to static funnel flows</strong> (Dashly). Dynamic hyperlinks are a core part of making that happen.

Testing Your Hyperlinks in Dialogflow

You cannot verify clickable links inside the Dialogflow console’s built-in test panel. The simulator renders text output only — rich content and Markdown formatting are stripped out.

Here’s how to test properly:

For Dialogflow CX Messenger: Go to Integrations, enable Dialogflow Messenger, and click Try it now. A live chat widget appears in the bottom right corner of your screen. Test your intent there and verify the link renders and opens correctly.

For custom integrations: Run your front-end application locally, trigger the relevant intent, and inspect the raw API response. Verify the fulfillmentMessages array contains your richContent payload, then confirm your rendering code handles it correctly.

For platform integrations (Facebook, Slack, Google Assistant): Use each platform’s native test environment. Dialogflow’s simulator will not reflect platform-specific rich responses.

Always test on both desktop and mobile. Link cards and buttons that render perfectly on a large screen sometimes behave differently in mobile webviews or messaging apps.

Common Mistakes When Adding Hyperlinks in Dialogflow

Using Markdown in an integration that doesn’t support it. Not every integration renders Markdown. If your bot is deployed to a platform that strips formatting, your links show as raw [text](url) strings. Confirm your platform supports Markdown before relying on it.

Forgetting that the console simulator won’t show rich content. This causes unnecessary debugging loops. Raw text in the test console is expected — it does not mean your payload is broken.

Misformatting the JSON payload. A single missing bracket or misplaced comma breaks the entire response. Validate your JSON before saving. Use a JSON linter to catch errors before they go live.

Nesting richContent incorrectly. Dialogflow CX requires one outer array with multiple inner arrays. Each inner array renders as a separate card. If your structure is wrong, no rich content appears at all.

Mixing response types incorrectly. You can combine info, image, and button types within the same inner array. They display as a single card. But placing them in separate inner arrays creates separate cards. Know which behaviour you want before structuring your payload.

<div style=”float: right; width: 260px; margin: 0 0 24px 32px; padding: 24px 20px; background-color: #ECECFE; border-radius: 12px; color: #1F2124; font-family: sans-serif;”>

🚀 Turn Chatbot Traffic Into Pipeline

See how SalesSo targets, designs, and scales outbound campaigns that convert your visitors into booked meetings

<a href=”https://salesso.com/book-strategy-meeting” style=”display: inline-block; margin-top: 12px; padding: 10px 18px; background-color: #2A5AF8; color: #ffffff; border-radius: 6px; text-decoration: none; font-weight: bold; font-size: 14px;”>Book Strategy Meeting</a>

</div>

You’ve set up clean, clickable links inside your Dialogflow bot. Users are navigating where you want them to go. That’s a solid foundation.

But here’s what most teams miss: the traffic your chatbot generates is warm intent. People who click your links are actively engaged. They’re already in a conversation. They’ve already raised their hand.

Most businesses stop at the bot. The high-performers turn that chatbot traffic into a full outbound pipeline — layering cold email, LinkedIn outreach, and targeted follow-up on top of every engaged visitor. That’s where the real pipeline comes from.

Troubleshooting: When Your Hyperlinks Still Don’t Work

If you’ve followed the steps above and your links still aren’t rendering, run through this checklist.

Check your integration type. Go to Integrations in the Dialogflow console and confirm which platform your agent is deployed to. Each platform has its own payload format requirements.

Validate your JSON structure. The most common failure point is malformed JSON. Paste your payload into jsonlint.com and fix any syntax errors before saving back to the console.

Confirm platform-specific payload requirements. Slack, Facebook Messenger, and Google Assistant each have their own custom payload schemas. A payload structured for Dialogflow CX Messenger will not work for Slack. Use the correct format for your target platform.

Inspect the raw API response. If you’re using a webhook, log the full API request and response. Confirm the fulfillmentMessages array contains your richContent payload. If it’s missing, the issue is in your webhook response — not the Dialogflow console.

Test with a fresh intent. Create a simple test intent with only a richContent payload and no other response types. Trigger it directly. If the link renders in that isolated test, the issue is in your original intent’s response configuration, not your setup.

Conclusion

Adding a hyperlink in Dialogflow is not complicated — once you know which method matches your version and deployment target.

Use Markdown in text responses for Dialogflow CX Messenger and integrations that support it. Use the richContent JSON payload for native CX Messenger link cards and buttons. Use custom JSON payloads in Dialogflow ES for fully custom integrations. And use webhook fulfillment when you need dynamic, context-aware links generated at runtime.

The details matter. Test in your real integration, not just the console. Validate your JSON. Match your payload format to your platform.

<strong>54% of consumers say they’re likely to engage with AI assistants and chatbots</strong> (Nextiva). Your bot is already getting that engagement. Clean, clickable hyperlinks are how you convert that attention into action.

If you want to take it further — turning the traffic and intent your chatbot generates into a full outbound pipeline — SalesSo builds and runs the targeting, campaigns, and scaling that convert engaged visitors into booked meetings.