Sweetalert: Not able to Add a hyperlink in the sweet alert

Created on 27 Jun 2018  ·  4Comments  ·  Source: t4t5/sweetalert

Hi Guys,
This is is my code which i am using to add a hyperlink in the text .
swal({ title: 'This is the ', text: '<a href="http://www.externalwebsite.com" target="_blank">externalwebsite.com</a>', html: true, showCancelButton: true, allowOutsideClick: true, goToExternal: true, externalUrl: 'http://www.externalwebsite.com', confirmButtonText: "Continue" });

But it doesn't come out properly. Here is how it comes

screenshot_32

Can you please let me know how can add an anchor tag inside the sweet alert.

Thanks
Adi

picture adiwithadidas

Most helpful comment

Hey there,

The reason the html parameter has been disabled is to discourage use cases where the website could potentially be XSS-attacked.

However, you should still be able to render raw HTML by passing a DOM node to the content parameter, like this:

const el = document.createElement('div')
el.innerHTML = "Here's a <a href='http://google.com'>link</a>"

swal({
  title: "Hello!",
  content: el,
})
picture t4t5 on 28 Jun 2018
👍6 👎3

All 4 comments

https://sweetalert.js.org/guides/#upgrading-from-1x
html is no longer used. Instead use the content object.

SergeyW picture SergeyW on 28 Jun 2018

Hi @SergeyW ,
Thanks for your reply. Yeah when i researched a bit about it, I got to know about the same.

But unfortunately, I am not able to place a hyperlink in the alert box with content object also. I had searched for some examples and i got many of them but all are about adding HTML form elements, Buttons, etc and none about hyperlinks or anchor tags.
If you can show me how to add an anchor tags or may be share some examples similar to that, it would be great.

Thanks
Adi

adiwithadidas picture adiwithadidas on 28 Jun 2018

Hey there,

The reason the html parameter has been disabled is to discourage use cases where the website could potentially be XSS-attacked.

However, you should still be able to render raw HTML by passing a DOM node to the content parameter, like this:

const el = document.createElement('div')
el.innerHTML = "Here's a <a href='http://google.com'>link</a>"

swal({
  title: "Hello!",
  content: el,
})
t4t5 picture t4t5 on 28 Jun 2018
👍6 👎3

Thanks a lot @t4t5

adiwithadidas picture adiwithadidas on 29 Jun 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

xgqfrms-GitHub picture xgqfrms-GitHub  ·  4Comments
mateuszjarzewski picture mateuszjarzewski  ·  4Comments
voodoo6 picture voodoo6  ·  4Comments
blackrosezy picture blackrosezy  ·  6Comments
jamieson99 picture jamieson99  ·  3Comments