N8N Chat Widget and Clickable links

Questions
1

Hey there,

I’m building a chatbot with the chat widget function of N8N itself, but I can’t figure out how to make any links in the chat widget clickable. They all come up as non clickable in both testing widget and embedded widget.

Does anyone know how I can make the links clickable?

Best regards,
Owen

1 Like
2

Hi @owen_boesveld1,

Here’s an example. You can have it respond with a webhook. I’ve include both the n8n workflow and the html to put on your site.

You can adjust it to use your n8n url and

Best

Robert

<!DOCTYPE html>
<html>
<head>
  <title>Webhook Chat Test</title>
</head>
<body>
  <h2>Send Message to Webhook</h2>
  <form id="chatForm">
    <label for="message">Message:</label><br>
    <input type="text" id="message" name="message" required><br><br>
    <button type="submit">Send</button>
  </form>

  <div id="response"></div>

  <script>
    document.getElementById('chatForm').addEventListener('submit', async function(e) {
      e.preventDefault();
      const message = document.getElementById('message').value;

      const response = await fetch('https://autoagent.website/webhook/f4b1ac4f-e20f-4b52-99bb-b3ff7977d2b8/chat', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ message })
      });

      const result = await response.text();
      document.getElementById('response').innerHTML = 'Response: ' + result;
    });
  </script>
</body>
</html>
3

Making Links Clickable in Your N8N Chat Widget

To ensure links are clickable within your N8N chat widget (including the testing widget, embedded widget, and hosted chat), you can achieve this by using Markdown syntax.

Within your chatbot’s response, format your links as follows:

[link text](link url)

Example:

If you want to link to Google, you would write:

[Google](https://www.google.com)

This Markdown formatting will render the link as clickable in all N8N chat widget environments.

I hope this helps!