Conversational Social Chat Component – vue-social-chat

social-chat is a Vue.js component to create a quick and user-friendly social chat or conversation form on the app.

Supported Social Chats:

• Whatsapp
• Telegram
• Messenger
• WeChat
• Twitter
• Viber
• Line chat
• Email client
• Custom Chat Form
• Or mixed

Basic usage:

1. Import and register the component.

// import
import Vue from 'vue'
import VueSocialChat from 'vue-social-chat'

// register
Vue.use(VueSocialChat)

// or locally
import { SocialChat } from 'vue-social-chat'

export default {
  ...
  components: {
    SocialChat
  }
  ...
}

2. The example to create a Messenger live chat.

<template>
  <div class="layout">
    <!-- ommited -->
    <SocialChat
      icon
      class="messenger-chat"
      :attendants="attendants"
    >
      <p slot="header">Click one of our representatives below to chat on Messenger.</p>
      <MyMessengerIcon slot="button" />
      <small slot="footer">Opening hours: 8am to 6pm</small>
    </SocialChat>
  </div>
</template>

export default {
  name: 'MessengerPage',
  components: {
    SocialChat
  },
  data: () => ({
    attendants: [
      {
        app: 'messenger',
        label: 'Technical support',
        name: 'Alan Ktquez',
        id: 'YOUR_FACEBOOK_ID',
        avatar: {
          src: 'avatar.png',
          alt: 'Alan Ktquez avatar'
        }
      },
      // ...
    ]
  })
}

3. The example to create a mixed live chat.

<template>
  <div class="layout">
    <!-- ommited -->
    <SocialChat :attendants="attendants">
      <p slot="header">Click one of our representatives below to chat.</p>
      <template v-slot:button="{ open }">
        <span v-show="!open">Contact us</span>
        <span v-show="open">Close</span>
      </template>
      <small slot="footer">Opening hours: 8am to 6pm</small>
    </SocialChat>
  </div>
</template>

import { SocialChat } from 'vue-social-chat'

export default {
  name: 'WhatsAppPage',

  components: {
    SocialChat
  },

  data: () => ({
    attendants: [
      {
        app: 'whatsapp',
        label: 'Support',
        name: 'Alan Ktquez',
        number: 'YOUR_PHONE_NUMBER',
        avatar: {
          src: 'avatar.png',
          alt: 'Avatar Support Alan Ktquez'
        }
      },
      {
        app: 'messenger',
        label: 'Technical support',
        name: 'Alan Ktquez',
        id: 'YOUR_FACEBOOK_ID',
        avatar: {
          src: 'avatar.',
          alt: 'Alan Ktquez avatar'
        }
      },
      {
        app: 'twitter',
        label: 'Human Resources',
        name: 'Alan Ktquez',
        id: 'YOUR_TWITTER_ID',
        avatar: {
          src: 'avatar.',
          alt: 'Avatar Support Alan Ktquez'
        }
      }
    ]
  })
}

Preview:

Changelog:

v0.1.6 (12/02/2020)

• Fix Whatsapp link to work on mobile and web

Download Details:

Author: ktquez

Live Demo: https://vue-social-chat.surge.sh/wechat

Download Link: https://github.com/ktquez/vue-social-chat/archive/master.zip

Official Website: https://github.com/ktquez/vue-social-chat

Install & Download:

# Yarn
$ yarn add vue-social-chat libphonenumber-js

# NPM
$ npm i vue-social-chat --save