How to embed a nuxtjs 3 component to external websites for giving messaging services for customer support?

Question

I am developing a customer relationship based web application using NuxtJs 3. there are different use cases responsible for using NuxtJs 3 for the project.

However, The project is almost done but I am stuck on a single feature which is the main thing of the application.

That is giving a js script to its customers and they will add that script in there websites head or at the end of body. and after that a messaging widget will be appear in every page of their website and there customers can use this widget to send message, ask questions etc.

Think about Zendesk, TalkTo and even facebook messaging widget... I need to add a similar thing in my nuxt project and that is very important.

In short, I'd like to render the app all by one <script>.

Answer 1

You can use <iframe> to show your app.

<div id="app"></div>
<script>
  const container = document.querySelector('#app')
  const el = document.createElement('iframe')
  el.setAttribute('src', 'https://example.com'
  container.appendChild(el)
</script>