I have been working on a chat plugin for HTML using VueJs, the problem is that I don’t know how to create a plugin that can be used to deploy this plugin on any website.
Basically I want to make a GET request which gets the chat plugin into any website. EG: Facebook Messenger Chat Plugin
I have the build files for this chat view. What should be my next move?
Thanks in advance!
Advertisement
Answer
I solved this problem by building the VueJs file and removing the , , , from the built file and then importing it into any HTML file using:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <div id="floating-chat"></div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="text/javascript"> axios.get('https://dfe43d80.ngrok.io/views').then(({data})=>{ $('#floating-chat').html(data); }).catch(err=>console.log(err)); </script>
Don’t forget to replace all the links from the server and use express.static
app.use(express.static(__dirname+'/dist')); fs.readFile(__dirname + '/dist/index.html', 'utf8', (err, html)=>{ if(err){ console.log(err); } html.replace('href=/js',`href=https://YOURWEBISTE.COM/js`); html.replace('href=/css',`href=https://YOURWEBISTE.COM/css`); html.replace('src=/js',`src=https://YOURWEBISTE.COM/js`); console.log(html); res.send(html); });
And use CORS to let other pages import your HTML content.