How to add anchor tag (<a></a>) in button template text property?

General
1

Hello,
In Message Node for web/mobile client I am using advanced option and selected “Button template” in which I need buttons along with text and inside that text I need an inline text where I am using anchor tag
example:var info = [“Books”, “Pens”];
var message = {
“type”: “template”,
“payload”: {
“template_type”: “button”,
“text”: “What do you need? you can visit Webpage”,
“subText”: “Button Template Description”,
“buttons”: []
}
};
for (i = 0; i < info.length; i++) {
// if the button is to send back text to platform
var button = {
“type”: “postback”,
“title”: info[i],
“payload”: info[i]
};

message.payload.buttons.push(button);

}
print(JSON.stringify(message));
but I am getting output in test bot:
{“type”:“template”,“payload”:{“template_type”:“button”,“text”:“What do you need? you can visit Webpage”,“subText”:“Button Template Description”,“buttons”:[{“type”:“postback”,“title”:“Books”,“payload”:“Books”},{“type”:“postback”,“title”:“Pens”,“payload”:“Pens”}]}}

image
image1443×908 70 KB

Capture2
Capture2787×453 35.6 KB

please find the above attachment.
Thanks & Regards
Krupa

2

@k.tummalacharla
In one of the screenshots, you would notice there is a commented code for adding a button that can serve as an URL redirector.
refer to /*Uncomment this if the button is to redirect the url
Did you try using this? I hope that resolves your issue.

3

that uncomment section I use it when I need button with link but my requirement is Inline text ( word with link inside text) in button template along with buttons
text: “hello click here (this as inline text)”
buttons: [button1,button2] which needs to inside postback as I required these as utterances.
at the end of button template the print(JSON.stringify(message)) is also applying on anchor tag I am getting entire object as response not getting normal button template response.

4

@k.tummalacharla
If this is what you want, you may try:
image

var message2 = {
    "type": "template",
    "payload": {
        "template_type": "button",
        "text": "Button Template Label " + '[Link text Here](https://link-url-here.org)' + ' with link',
        "subText": "Button Template Description",
        "buttons": [
            {
            "type": "postback",
            "title": "Button1",
            "payload": "payload1"
            },
            {
                "type": "postback",
                "title": "Button2",
                "payload": "payload2"
            }]
        }
    };



print(JSON.stringify(message2));
1 Like
5

Yes, Thank you @swagata.sengupta

6

Hello,

The solution you provided is working fine in koreai test bot, My deployed channel is web/mobile client, it is not working in deployed chat bot page, can you please provide another solution for this.

Regards,
Krupa.

image
image

image
image1765×737 59.1 KB

7

Hello @k.tummalacharla ,

We tested with local host and could confirm that the hyperlink works as expected. Let us know if you are using the latest SDK for testing. Also let us know the website you have integrated the bot with. Is it accessible for us to test?

8

Hello,

I will confirm with my Lead, if I can share the website or not mean while can you please share you local host code where you are rending the bot message for the above issue.

Regards,
Krupa.

9

Hello Krupa,

Just us the latest SDK files and steps shared in our documentation on WebSDK .

Within the bot, I used the code share in this post -

10

I am facing same issue,any solution ??

11

Hello Tharun,

Welcome to Kore.ai Community.
Please confirm if you have referred to the above mentioned steps ?

Thank you,
Srujan Madderla
Kore.ai Community Team

12

Hey yeah I have referred to the same steps.
Talk to bot is working but if I do the same in website it dosent

13

I am facing a similar issue however, I am wanting the link to generate from the Knowledge base instead of a written in message. For example, the customer ask a specific question and the response should answer said question and direct them to a link for more information. Can someone assist?

14

Hello Andra,

Welcome to Kore.ai Community.

Could you please try the below and let us know if that works for you ?

Try to mplement a clickable link in your Kore.ai button template:

Please try include HTML anchor tags directly in the template’s text property by using the proper HTML syntax:

{
  text: "<a href='https://www.example.com' target='_blank'>Click here</a> to visit our website"
}
  • Use single quotes for the href attribute to avoid JSON parsing issues
  • Include target=‘_blank’ if you want the link to open in a new tab
  • The anchor tag will be rendered as a clickable link in the chat interface

Example:

const buttonTemplate = {
  text: "<a href='https://www.example.com' target='_blank'>Click here</a> to visit our website",
  buttons: [{
    type: "web_url",
    url: "https://www.example.com",
    title: "Visit Website"
  }]
};

This might be helpful and allows you to have both a clickable link in the message text and a separate button, giving users multiple ways to access the URL.

Please try and and let us know if that works for you ?

Thank you,
Srujan Madderla
Kore.ai Community Team