@mercury-chat/vue-chat v0.1.0

Mercury Chat - Vue Chat

Welcome To Mercury Chat! This library is used to seamlessly embed Cardano Wallet to Wallet communication into any Cardano Application!

This library supports Vue 3. We have other libraries that support React and NextJS and Vue2 and NuxtJS

1: Installation:

npm install @mercury-chat/vue-chat

2: Usage:

The aim of Mercury Chat is to be able to embed a chat system into your application as seamlessly as possible (ideally with only 1 line of code).

Import MercuryChat into a component like this:

import '@mercury-chat/vue-chat/dist/mercury-chat.css';
import plugin from '@mercury-chat/vue-chat';
createApp(App).use(plugin).mount("#app")

And use it inside a Single File Component like this:

<MercuryChat />

The default MercuryChat implementation has a chat button appear the bottom right of the component (you can place such that the chat bubble appears in the bottom right section of the screen)

3: Optional Parameters

MercuryChat has several optional props that can be used to customize functionality

<MercuryChat position='bottom-right' :hasFullscreen=true :showBackground=true />

• position: 'bottom-right' | 'standard' - defaults to 'bottom-right'. The position prop determines where on the screen the chat bubble will appear. If the position is 'bottom-right' than the chat bubble will appear on the bottom right of the component. If the position is 'standard' the chat bubble can be moved around the component at will.

• positionValues: { top: number, bottom: number, left: number, right number } - defaults to { top: 0.5, bottom: 0.5, left: 1, right: 1 } The positionValues prop determines the absolute position of the chat system when using the 'bottom-right' position prop. This is useful if you have something like Google ReCaptcha in the bottom right of your screen and you want to move the chat system so it is not covering the other content.

• hasFullscreen: boolean - defaults to true. The hasFullscreen prop determines if the chat will open up in a large screen or not. Some dapps may want fullscreen chat, while others such as NFT marketplaces may want to turn hasFullscreen to false to allow users to browse the marketplace while chatting

• showBackground: boolean - defaults to true. The showBackground tag determines if there will be a black transparent background behind the chat that will be clickable to close the chat

• triggerMercury: number - defaults to 0. This allows the client application to control the opening and closing of Mercury with their own system. Pass 1 into this prop to open Mercury, and pass 2 into this prop to close Mercury. Passing 0 into this prop will have control be given over to the standard component button.

• showNotifications: boolean - defaults to true. This prop determines if the user will see a red notification circle in the top left of their image when Mercury is closed.

• showNotificationNumbers: boolean - defaults to true. This prop determines if a user will see numbers in the red notification circle.

• onOpen: function - defaults to () => void 0. A callback function you can use to trigger functionality when Mercury is opened.

• onClose: function - defaults to () => void 0. A callback function you can use to trigger functionality when Mercury is closed.

• onSignIn: function - defaults to () => void 0. A callback function you can use to trigger functionality when a user signs into Mercury.

• onSignOut: function - defaults to () => void 0. A callback function you can use to trigger functionality when a user signs out of Mercury.

• chatImage: string - defaults to "https://saturn-production.nyc3.digitaloceanspaces.com/Assets/chat-ocean-500.png". The URL of a hosted chat image. This image will be the chat image that is seen by your users.

• hoverChatImage: string - defaults to "https://saturn-production.nyc3.digitaloceanspaces.com/Assets/chat-ocean-900.png". The URL of a hosted hover chat image. This image will be the chat image that is seen by your users when they are hovering over the chat image.

• branding: strings - defaults to ''. This is used to adjust the branding inside Mercury and is a payed feature from the Mercury integration page

• user: string - defaults to ''. This user can be a Cardano address or ADAHandle that will directly go to chat between the logged in user and the user that is set as this prop. Useful for buttons on a profile or sale page where you want users to quickly and directly chat.

• message: string - defaults to ''. This will be a pre-written message that is loaded into the users message bar when they open Mercury. The user does not have to send this message.

• community: string - defaults to ''. This is the community that will open up when the user opens Mercury. Useful for giving users visibility into your community.

• dappCommunity: string - defaults to ''. This is the community that will exist at the top of the community panel while Mercury is open. Useful for giving users visibility into your community.

If you have any feedback or suggestions you can message them in the Town Square on Mercury Chat or ask on our Twitter or Discord (http://discord.gg/NvVNfQmPjp)

I hope you all enjoy chatting!