ktquez / vue-social-chat

Vue.js component for your visitors and customers to send messages directly to you through social chats or customized form.

vue-social-chat

---

🔥 HEADS UP! You are in the Vue 2 compatible branch, check the branch for Vue 3 support.

---

Vue.js component for your visitors and customers to send messages directly to you through social chats or customized form.

vue-social-chat allows your customers to open a conversation from your website directly to chat apps like WhatsApp, Telegram, Messenger, WeChat, Line, Viber or even the same custom form.

Most people use a chat app, so offering your customer a form of direct contact helps you cover visitors to customers, as well as providing you with leads to increase your sales or spread your content.

Links

• Documentation
• Demo

Contributing

• Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;
• Fork repository, make changes, add your name and link in the authors session CONTRIBUTING.md;
• Send a pull request;

Support me

If you want a faster communication, find me on @ktquez

License

VueDisqus is open-sourced package licensed under the MIT license

vue-social-chat's Issues

Setup on Vue Js 3

I tried to set it up on Vue Js 3 but seems I get blank page, this is already supported on Vue js 3?

Whatsapp attendant hidden by adblock

Can you check out, that no attendants are showing with the setting app: 'whatsapp'?
It looks like, Adblock Plus (Google Chrome) filters out whatsapp and other link URL's what are set in the href attribute, through injected stylesheet

a[href^="https://api.whatsapp.com/send?"]

I thought about three different options:

1. Make the whatsapp-url call by running a JS function
2. Display a message to the user, that adblock is on
3. Hide the social-chat-button by dependency (if all attendees are whatsapp and adblock is on, hide button)

Trigger Whatsapp Popup on <a> event

Hello,

How to trigger the vue social chat/whatsapp popup when click on element?

I tried to force click by using .click(), unfortunately it auto closed the popup.

Whatsapp link on mobile - wrong url

Hi,
great work on the social-chat
It works great on browser but not on mobile.

you use https://web.whatsapp.com/send?
and on mobile I think we need to use https://wa.me/1XXXXXXXXXX (link to Whatsapp)

Icon button doesn't circle or doesn't have border-radius

My icon doesnt circle, how to fix it ?

in style i using

.whatsapp-chat {
  --whatsapp: #46c056;
  --vsc-bg-header: var(--whatsapp);
  --vsc-bg-button: var(--whatsapp);
  --vsc-outline-color: var(--whatsapp);
  --vsc-border-color-bottom-header: #289D37;
}

PT. Pt

Jika anda memiliki kendala atau pertanyaan, silahkan pilih salah satu CS kami untuk chat.

Call us to +62 from 9AM-5PM (UTC+7)

Simple Update

can we update this project for default message ?
simple : 'https://api.whatsapp.com/send?phone=attendants.number&text=attendants.message',
idk which platform can support message but i need this update for whatsapp ^_^

Question: CDN Version

Hi there

Thanks for amazing work. I am using Vuetify CDN version, where can I get a CDN version of your library so that I can use withing the <script> tags?

Thanks

Avatar image

Currently, you're giving the option to insert an avatar by setting a url/path to the image.
Using nuxt, I'd like to load from my assets folder. Either by require() or per absolute path:

data: () => ({
    attendants: [
        {
            app: 'whatsapp',
            label: 'Partner',
            name: 'John Doe',
            number: '1234567890',
            avatar: {
                src: require('@/assets/John_Doe.jpg'),
                // OR
                src: '@/assets/John_Doe.jpg',
                alt: 'John Doe avatar'
            }
        }
    ]
})

Which results in following in the frontend:

<img src="[object Object]" alt="John Doe avatar">
resp.
<img src="~/assets/John_Doe.jpg" alt="John Doe avatar">

It looks like your plugin surpasses the assets functionality. Not a major issue, but still an issue :)

Vue 3 error

I installed the component, declared it locally and copy the component as in the example and it throws the following error for me.

I also read that Vue 3 support is still being worked on. I just wanted to show the error that it returns to me in console.
Your work looks excellent, I hope one day I will have the ability to program like you.
First of all congratulations and I look forward to compatibility.