# BotFront webchat how to parse link as html instead of plain text

**URL:** <https://forum.rasa.com/t/botfront-webchat-how-to-parse-link-as-html-instead-of-plain-text/56158>\
**Category:** Rasa Open Source\
**Created:** [November 14, 2022, 8:02pm UTC](https://forum.rasa.com/t/botfront-webchat-how-to-parse-link-as-html-instead-of-plain-text/56158 "2022-11-14T20:02:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![christos](https://avatars.discourse-cdn.com/v4/letter/c/e36b37/32.png) [@christos](https://forum.rasa.com/u/christos)\
**Post date:** [November 14, 2022, 8:02pm UTC](https://forum.rasa.com/t/botfront-webchat-how-to-parse-link-as-html-instead-of-plain-text/56158/1 "2022-11-14T20:02:01Z")

</div>

I am using rasa 3+ deployed with kubernetes. Also I am using the rasa-webchat widget and works fine. In action server I have a response that sends an html anchor in order the user to click it and see content. But rasa-webchat widget renders the anchor tag as plain text. How can I render it as html element? And one more question. When I try to use rasa-webchat as react component does not work. Shows nothing but a blank page. This is my code import Widget from “rasa-webchat”;

function CustomWidget() {

return (

```
<Widget

  initPayload={"/get_started"}

  socketUrl={"my socket.io url"}

  socketPath={"/socket.io/"}

  customData={{ language: "en" }} // arbitrary custom data. Stay minimal as this will be added to the socket

  title={"Title"}

/>

```

);

}

export default CustomWidget; and I imported on App.js. In addition, this is what my console prints: react.development.js:209 Warning: Failed prop type: invariant is not defined at a ([http://localhost:3001/static/js/bundle.js:26386:10](http://localhost:3001/static/js/bundle.js:26386:10)) at p ([http://localhost:3001/static/js/bundle.js:22518:36](http://localhost:3001/static/js/bundle.js:22518:36)) at Connect(a) at d ([http://localhost:3001/static/js/bundle.js:22408:17](http://localhost:3001/static/js/bundle.js:22408:17)) at [http://localhost:3001/static/js/bundle.js:27326:29](http://localhost:3001/static/js/bundle.js:27326:29) at [http://localhost:3001/static/js/bundle.js:27925:31](http://localhost:3001/static/js/bundle.js:27925:31) at div at a ([http://localhost:3001/static/js/bundle.js:28077:12](http://localhost:3001/static/js/bundle.js:28077:12)) at CustomWidget at div at App@nik202

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [November 15, 2022, 6:18pm UTC](https://forum.rasa.com/t/botfront-webchat-how-to-parse-link-as-html-instead-of-plain-text/56158/2 "2022-11-15T18:18:07Z")

</div>

@christos I do not get your can you share some examples? and what you are trying to render.

---

<div class="post-metadata">

**Author:** ![christos](https://avatars.discourse-cdn.com/v4/letter/c/e36b37/32.png) [@christos](https://forum.rasa.com/u/christos)\
**Post date:** [November 15, 2022, 8:58pm UTC](https://forum.rasa.com/t/botfront-webchat-how-to-parse-link-as-html-instead-of-plain-text/56158/3 "2022-11-15T20:58:18Z")

</div>

I am trying to implement a basic chat functionality with react. I send messages successfylly but I cant receive any response back. This is my code:

function Chat({ socket }) { socket.on(“connect”, function () { console.log("connected: " + socket.id); });

useEffect( function () { socket.on(“bot\_uttered”, function (botResponse) { console.log("Bot uttered-\> ", botResponse); }); }, [socket] );

const [message, setMessage] = useState(“”);

function handleSubmitMessage(event) { event.preventDefault(); socket.emit(“user\_uttered”, { message: message, session\_id: “building\_react\_app”, }); setMessage(“”); }

function handleChange(event) { setMessage(event.target.value); }

console.log(message);

return (

Sensi
body

{/\* form implementation \*/}

); }