@mercury-chat/vue-chat-previous v0.1.1

Mercury Chat - Vue Chat

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

This library supports Vue 2 / NuxtJS 2, but we also have a library for React and Vue 3+

1: Installation:

npm install @mercury-chat/vue-chat-previous

2: Usage:

The aim of Mercury Chat is to be able to embed a chat system into your application as seamlessly as possible.

Import MercuryChat into a component and use it inside a Single File Component like this:

<script>
import MercuryChat from '@mercury-chat/vue-chat-previous';

export default {
  name: 'App',
  components: {
    MercuryChat
  }
}
</script>

<template>
  <div id="app">
    <MercuryChat />
  </div>
</template>

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)

If you are using NuxtJS, you will need to register this package as a plugin in the nuxt.config.js file

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!