This brief article shows you the embedding webchat in Vue steps, effortlessly.
Let’s get to it!
How to get your webchat snippet
- Choose your workspace, press Configuration from the left menu.
- Click on Channels.
- Pick your webchat.
- Click the Platform Settings tab.
- Press Deploy, then Copy snippet.
Embedding steps for webchat in Vue
Here are 2 ways you can do it:
- Create a new Vue component.
- Add this piece of code:
<template>
<div id="embedded_messenger">
<div id="widget-launcher"></div>
<link rel="stylesheet" href="https://store.beta.tactful.ai/webchat/css/embed.css" />
<iframe id="tactful_client" src="https://store.beta.tactful.ai/chatChannel.html"></iframe>
</div>
</template>
<script lang="ts">
/* global Tactful */
import Vue from "vue";
export default Vue.extend({
name: 'webchatSnippet',
async created(){
let externalScript = document.createElement('script');
await externalScript.setAttribute('src', 'https://store.beta.tactful.ai/embed/embed.js');
document.head.appendChild(externalScript);
externalScript.onload = async() => {
await this.startWebchat();
}
},
methods:{
async startWebchat(){
var profile = // your profile name ;
var token = // your profile token ;
var channelId = //your channel ID ;
Tactful.start({ profile: profile, token: token, channelId: channelId });
}
},
async updated () {
await this.startWebchat();
},
})
</script>
3. Call this component in the page you want to show the webchat in
Or
- Copy the webchat snippet from the platform settings tab
- Import the copied snippet into your website body with “(index.html) to the bottom of the body tag:
<div id="embedded_messenger">
<div id="widget-launcher"></div>
<iframe id="tactful_client" src="https://bot.beta.tactful.ai/chatChannel.html"></iframe>
</div>
<script src="https://bot.beta.tactful.ai/embed/embed.js"></script>
<link rel="stylesheet" href="https://bot.beta.tactful.ai/webchat/css/embed.css" />
<script>
var profile = profileName;
var token = token ;
var channelId = channelId;
Tactful.start({ profile: profile, token: token,channelId: channelId });
</script>
