npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@livechat/widget-vue

v1.3.3

Published

This library allows to render and interact with the LiveChat Chat Widget inside a Vue 3 application

Downloads

21,110

Readme

@livechat/widget-vue

This library allows to render and interact with the LiveChat Chat Widget inside a Vue application.

mit Github lerna version lerna Check

Installation

Using npm:

npm install @livechat/widget-vue

or using yarn:

yarn add @livechat/widget-vue

Usage

Render

Vue 3

<script lang="ts" setup>
  import { LiveChatWidget, EventHandlerPayload } from '@livechat/widget-vue'

  function handleNewEvent(event: EventHandlerPayload<'onNewEvent'>) {
    console.log('LiveChatWidget.onNewEvent', event)
  }
</script>

<template>
  <LiveChatWidget
    license="12345678"
    visibility="maximized"
    v-on:new-event="handleNewEvent"
  />
</template>

Vue 2

<template>
  <LiveChatWidget
    license="12345678"
    visibility="maximized"
    v-on:new-event="handleNewEvent"
  />
</template>

<script>
  import { LiveChatWidget } from '@livechat/widget-vue/v2'

  export default {
    name: 'App',
    components: {
      LiveChatWidget,
    },
    methods: {
      handleNewEvent(event) {
        console.log('LiveChatWidget.onNewEvent', event)
      },
    },
  }
</script>

Props

Config data

All properties described below are used for initialization on the first render and later updates of the chat widget with new values on change.

| Prop | Type | | ---------------------- | -------------------------------------- | | license | string (required) | | customerName | string | | group | string | | customerEmail | string | | chatBetweenGroups | boolean | | sessionVariables | Record<string, string> | | visibility | 'maximized' | 'minimized' | 'hidden' | | customIdentityProvider | () => CustomerAuth |

CustomerAuth:

| parameters | type | description | | ------------- | ---------------------- | -------------------------------------------------------------------------------------- | | getFreshToken | () => Promise | Should resolve with freshly requested customer access token. | | getToken | () => Promise | Should resolve with currently stored customer access token. | | hasToken | () => Promise | Should resolve with a boolean value representing if a token has been already acquired. | | invalidate | () => Promise | Should handle token invalidation and/or clearing the locally cached value. |

Event handlers

All event handlers listed below are registered if provided for the first time. They unregister on the component cleanup or the property value change. Descriptions of all events are available after clicking on the associated links.

Composition API

This package exports a set of Vue Composition API utilities that allow consuming reactive data from the chat widget in any place of the application as long as the LiveChatWidget component is rendered in the tree.

The composition API is only availble for Vue 3 apps.

useWidgetState

Access the current chat widget availability or visibility state if the chat widget is loaded.

<script setup>
  import { useWidgetState } from '@livechat/widget-vue'
  const widgetState = useWidgetState()
</script>

<template>
  <div v-if="widgetState">
    <span>{{widgetState.availability}}</span>
    <span>{{widgetState.visibility}}</span>
  </div>
</template>

useWidgetIsReady

Check if the chat widget is ready using the boolean flag isWidgetReady.

<script setup>
  import { useWidgetIsReady } from '@livechat/widget-vue'
  const isWidgetReady = useWidgetIsReady()
</script>

<template>
  <div>
    <span>Chat Widget is</span>
    <span v-if="isWidgetReady">loaded</span>
    <span v-else>loading...</span>
  </div>
</template>

useWidgetChatData

Access the chatId and threadId of the chat if there's one currently available.

<script setup>
  import { useWidgetChatData } from '@livechat/widget-vue'
  const chatData = useWidgetChatData()
</script>

<template>
  <div v-if="chatData">
    <span>{{chatData.chatId}}</span>
    <span>{{chatData.threadId}}</span>
  </div>
</template>

useWidgetGreeting

Access the current greeting id and uniqueId if one is currently displayed (received and not hidden).

<script setup>
  import { useWidgetGreeting } from '@livechat/widget-vue'
  const greeting = useWidgetGreeting()
</script>

<template>
  <div v-if="greeting">
    <span>{{greeting.id}}</span>
    <span>{{greeting.uniqueId}}</span>
  </div>
</template>

useWidgetCustomerData

Access the id, isReturning, status, and sessionVariables of the current customer if the chat widget is loaded.

<script setup>
  import { useWidgetCustomerData } from '@livechat/widget-vue'
  const customerData = useWidgetCustomerData()
</script>

<template>
  <div v-if="customerData">
    <span>{{customerData.id}}</span>
    <span>{{customerData.isReturning}}</span>
    <span>{{customerData.status}}</span>
    <ul>
      <li v-for="variable in customerData.sessionVariables">{{variable}}</li>
    </ul>
  </div>
</template>

Custom Identity Provider

In order to make Custom Identity Provider work, you'll have to properly implement and provide a set of following methods:

  • getToken - resolving Chat Widget token. If you want to cache the token, this should return the cached token instead of a fresh request to https://accounts.livechat.com/customer/token endpoint.
  • getFreshToken - resolving Chat Widget token. This should always make a call for a fresh token from https://accounts.livechat.com/customer/token endpoint.
  • hasToken - resolving boolean. It determines whether a token has been acquired.
  • invalidate - resolving nothing. When called, it should remove the current token. There is no need to do anything else as a new token will be requested by getFreshToken afterwards.
Example usage

Vue 3

<script lang="ts" setup>
  import { LiveChatWidget } from '@livechat/widget-vue'

  const customIdentityProvider = () => {
    const baseAPI = 'YOUR_API_URL'
    const userId = '30317220-c72d-11ed-2137-0242ac120002'

    const getToken = async () => {
      const response = await fetch(`${baseAPI}/getToken/${userId}`)

      const token = await response.json()
      console.log('getToken', token)
      return token
    }

    const getFreshToken = async () => {
      const response = await fetch(`${baseAPI}/getFreshToken/${userId}`)

      const token = await response.json()
      console.log('getFreshToken, token')
      return token
    }

    const hasToken = async () => {
      const response = await fetch(`${baseAPI}/hasToken/${userId}`)
      const data = await response.json()
      return data
    }

    const invalidateToken = async () => {
      const response = await fetch(`${baseAPI}/invalidate/${userId}`)
      const data = await response.json()
      console.log(data)
    }

    return {
      getToken,
      getFreshToken,
      hasToken,
      invalidate: invalidateToken,
    }
  }
</script>

<template>
  <LiveChatWidget
    license="12345678"
    visibility="maximized"
    :customIdentityProvider="customIdentityProvider"
  />
</template>

Vue 2

<template>
  <LiveChatWidget
    license="12345678"
    visibility="maximized"
    :customIdentityProvider="customIdentityProvider"
  />
</template>

<script>
  import { LiveChatWidget } from '@livechat/widget-vue/v2'

  export default {
    name: 'App',
    components: {
      LiveChatWidget,
    },
    methods: {
      customIdentityProvider() {
        const baseAPI = 'YOUR_API_URL'
        const userId = '30317220-c72d-11ed-2137-0242ac120002'

        const getToken = async () => {
          const response = await fetch(`${baseAPI}/getToken/${userId}`)

          const token = await response.json()
          console.log('getToken', token)
          return token
        }

        const getFreshToken = async () => {
          const response = await fetch(`${baseAPI}/getFreshToken/${userId}`)

          const token = await response.json()
          console.log('getFreshToken, token')
          return token
        }

        const hasToken = async () => {
          const response = await fetch(`${baseAPI}/hasToken/${userId}`)
          const data = await response.json()
          return data
        }

        const invalidateToken = async () => {
          const response = await fetch(`${baseAPI}/invalidate/${userId}`)
          const data = await response.json()
          console.log(data)
        }

        return {
          getToken,
          getFreshToken,
          hasToken,
          invalidate: invalidateToken,
        }
      },
    },
  }
</script>

For more information about Custom Identity Provider, check out https://developers.livechat.com/docs/extending-chat-widget/custom-identity-provider

Contributing

Pull requests are welcome. For major changes, please open an issue first, so we can discuss what you would like to change. Follow a Contributing guide for more details.

License

This project is MIT licensed