Menu
I want to import reactjs or any framework app in html. Example:
<html>
<head>
<title>Test Bot</title>
<style>
.chatbot-goes-here {
position: fixed;
bottom: 0;
right: 5rem;
}
</style>
</head>
<body>
<div id="chatbot-goes-here"></div>
</body>
<script src="./index.js"></script>
</html>
my index.js
const x = document.getElementById('chatbot-goes-here');
x.innerHTML = `<h1>hi</h1>`
Now in "index.js" i want my react app logic which is changing the "div" with id="chatbot-goes-here". So the idea is this index.js file will be hosted on cloud instance and someone can include the div and script file to use the chatbot.
778
asked Mar 12 '26 11:03
you can import react in your html file using cdn link, You can copy the following template i have designed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React practice</title>
</head>
<body>
<div id="root"></div>
<!-- React CDN Link -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<!-- React-DOM CDN Link -->
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<!-- Babel CDN Link -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Linking index.js file -->
<script src="index.js" type="text/jsx"></script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With