How to generate a script to open in another website ?

 

✅ 1. Expose your chatbot via URL

Ensure your chatbot is accessible via a public route like:

arduino
https://yourdomain.com/chatbot

Or if it’s in a component:

ts
RouterModule.forRoot([
  { path: 'chatbot', component: ChatbotComponent }
])

---

✅ 2. Create an embeddable script

Make a JS snippet that other websites can paste:

🔧 Example embed.js

js
(function () {
  const iframe = document.createElement('iframe');
  iframe.src = "https://yourdomain.com/chatbot";
  iframe.style.position = "fixed";
  iframe.style.bottom = "20px";
  iframe.style.right = "20px";
  iframe.style.width = "350px";
  iframe.style.height = "500px";
  iframe.style.border = "none";
  iframe.style.borderRadius = "12px";
  iframe.style.zIndex = "9999";
  document.body.appendChild(iframe);
})();

---

✅ 3. Host that script on your server

Place embed.js in your Angular app’s assets folder and serve it:

Access it via:

arduino
https://yourdomain.com/assets/embed.js

---

✅ 4. Add the script to another website

The owner of the other website just needs to include this in their HTML:

html
<script src="https://yourdomain.com/assets/embed.js"></script>

---

✅ 5. (Optional) Add a toggle button

If you don’t want the iframe always visible, create a toggle:

Update embed.js

js
(function () {
  const button = document.createElement('button');
  button.innerText = '💬 Chat';
  button.style.position = 'fixed';
  button.style.bottom = '20px';
  button.style.right = '20px';
  button.style.zIndex = '9998';
  button.style.border = 'none';
  button.style.background = '#4a90e2';
  button.style.color = '#fff';
  button.style.padding = '12px 16px';
  button.style.borderRadius = '24px';
  button.style.cursor = 'pointer';
  button.style.boxShadow = '0 2px 6px rgba(0,0,0,0.2)';

  const iframe = document.createElement('iframe');
  iframe.src = "https://yourdomain.com/chatbot";
  iframe.style.position = "fixed";
  iframe.style.bottom = "70px";
  iframe.style.right = "20px";
  iframe.style.width = "350px";
  iframe.style.height = "500px";
  iframe.style.border = "none";
  iframe.style.borderRadius = "12px";
  iframe.style.zIndex = "9999";
  iframe.style.display = "none";

  button.onclick = () => {
    iframe.style.display = iframe.style.display === 'none' ? 'block' : 'none';
  };

  document.body.appendChild(button);
  document.body.appendChild(iframe);
})();