How to Embed Webchat in Vue

How to Embed Webchat in Vue

Embedding your webchat in Vue is a few seconds away.
Last Updated October 5, 2022
Table of Contents

This brief article shows you the embedding webchat in Vue steps, effortlessly.

Let’s get to it!

How to get your webchat snippet

  1. Choose your workspace, press Configuration from the left menu.
  2. Click on Channels.
  3. Pick your webchat.
  4. Click the Platform Settings tab.
  5. Press Deploy, then Copy snippet.

Embedding steps for webchat in Vue

Here are 2 ways you can do it:

  1. Create a new Vue component.
  2. 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

  1. Copy the webchat snippet from the platform settings tab
  2. 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>

Want to learn more?
Was this article helpful?