CODEWITHSUNDEEP
javascripthtmlvue.jsplugins
Rohit Nair
Rohit Nair

Reputation: 688

Create a chat plugin for HTML using VueJs

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!

Upvotes: 0

Views: 296

Answers (1)

Rohit Nair
Rohit Nair

Reputation: 688

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.

Upvotes: 1

Related Questions