How do I send clickable links as the bot response?

Hi all,

I wanted to send clickable URLs in the bot’s responses. Could you please tell me a way of doing this?

wrap the link with <a> tag

Thank you @Haythamamin. Yes I tried it but it’s showing up the <a> tags as well on the bot window.
Here’s the code snippet from actions.js for your reference.

async function qnaAnswer(state, event, params) {
	const workbook = xlsx.readFile('./test.xlsx');
	const worksheet = workbook.Sheets[workbook.SheetNames[0]];

	const questions = Array();
	const answers = Array();

    var dict = {}
    for (let z in worksheet) {
      var key;var value;
      if(z.toString()[0] === 'A'){
        questions.push(worksheet[z].v.toString());
        key = worksheet[z].v.toString()
      }

      if(z.toString()[0] === 'C'){
        answers.push(worksheet[z].v.toString());
        value = worksheet[z].v.toString()
      }

      dict[key] = value
    }

	var matches = stringSimilarity.findBestMatch(params.question, questions);

	console.log(matches["bestMatch"])
	console.log(dict[matches["bestMatch"]['target']])
 	var res ;
 	if(matches["bestMatch"]["rating"] < 0.3){
 		res = "Sorry I did't understand! Could you please try asking it in a different way?"
 	}else{
 		res = dict[matches["bestMatch"]['target']].replace(/(http:\/\/\S+)/g, "<a href='$1'>$1</a>"); 
// regex for wrapping up the link in <a> tag
 	}

 	 return { ...state, ans:res }
}

Apart from using regex I tried wrapping up the links manually as well but still it shows up the text with anchor tags.

Can you share with me the output of the above function? Here is how I wrapped mine:

<a href="http://url-to-site" style="font-family: 'Times New Roman', Times, serif; color: rgb(0,0,255); text-decoration: none" target="_blank">LINK</a>

image
FYI you need to add target="_blank" so that when user click the link new tab open, otherwise link will try to render in chat window.

1 Like

Hi @Haythamamin, Yes sure, this is the output of the above function.
clickable_url
The links are extracted from a database and returned as an answer from the function as shown in the above posted code.

But in other file (index.js) when I send a link manually using

bp.renderers.sendToUser(user,'#builtin_text', { text: ' I’ve done a search for you –\n \n <a href="http://test-url.com/test" >http://test-yrl.com/test</a> \n', typing: true })  

The link is clickable as shown below :
clickable2
`

P.S Apparently when I was going through the table web_messages, I came across these logs for the two different messages mentioned above.

For the message where the link is not clickable (1st image ):

{"to":"webchat:eAsuVpL07Vu_u6Q9kOTYJ","message":"&lt;a href&#x3D;&quot;http:&#x2F;&#x2F;test-url.com&#x2F;test&quot; target&#x3D;&quot;_blank&quot;&gt;http:&#x2F;&#x2F;test-url.com&#x2F;test&lt;&#x2F;a&gt;","typing":1000,"markdown":true,"conversationId":127}

And
for the message where the link is clickable (2nd image):

{"to":"webchat:eAsuVpL07Vu_u6Q9kOTYJ","message":"&lt;a href&#x3D;&quot;http:&#x2F;&#x2F;test-url.com&#x2F;test&quot; target&#x3D;&quot;_blank&quot;&gt;http:&#x2F;&#x2F;test-url.com&#x2F;test&lt;&#x2F;a&gt;","typing":1000,"markdown":true,"conversationId":127}

Please let me know if you need anything else on this from my side
Thank you !

1 Like

@Haythamamin But I cannot use bp.renderers in action.js so making links clickable is still a problem.

try event reply: event.reply(’#builtin_text’, { text: “${res}” ,typing: true })

2 Likes

Hey @Haythamamin, it worked !!

Thank you !

@Haythamamin, can you please send the complete implementation of the code on how to post a url on the chatbox.

Thank you

Hello @Aditya233, we use markdown for text messages, so you can send a link simply by typing that text in your content element:

[Visir our website](https://botpress.io)