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

@velaro/visitor-chat

v1.0.0

Published

Velaro package for adding live chat to your website.

Downloads

5

Readme

Velaro Visitor Chat

This package allows you to add Velaro Chat to your JavaScript application.

Installation

Using NPM:

npm install @velaro/visitor-chat

Using Yarn:

yarn add @velaro/visitor-chat

Quick Start

Using React:

import * as React from "react";
import * as Velaro from "@velaro/visitor-chat";

function useVelaro() {
  React.useEffect(() => {
    Velaro.boot({ siteId: mySiteId });

    return () => {
      Velaro.destroy();
    };
  }, []);
}

export default function MyComponent() {
  useVelaro();
  return <div>hello world</div>;
}

Using Vue.js:

<template>
  <div>hello world</div>
</template>

<script>
  import * as Velaro from "@velaro/visitor-chat";

  export default {
    mounted() {
      Velaro.boot({ siteId: mySiteId });
    },

    beforeDestroy() {
      Velaro.destroy();
    },
  };
</script>

API Documentation

Each of the following methods will use the Velaro class instance. To import the class instance, add this code to the top of your module.

import * as Velaro from "@velaro/visitor-chat";

boot

The boot method is responsible for bootstrapping Velaro chat with necessary configurations and mounting the chat window to the DOM. This method will also trigger visitor monitoring functions.

const config = {
  // siteId will be included in your deployment script.
  // This value should not be changed.
  siteId: [your siteId],

  // When groupId is zero, it will send all chats through
  // the default group. To get a specific groupId, change
  // groups in the chat designer and view the deployment
  // script.
  groupId: 0,

  // This option disables inline chat. You can set this to
  // true if you only want to use popout chat or use other
  // api methods without displaying inline chat.
  disableInline: false,

  // This option disables the chat launcher. If you want to
  // customize the behavior or appearance of the chat launcher
  // beyond the capabilities of the chat designer, set this
  // to true and use other API methods to display and hide the
  // chat window and launcher.
  disableLauncher: false,

  // If a chat session should persist across subdomains, this
  // value should be set. For example, if a chat is started on
  // foo.example.com, and the user navigates to bar.example.com,
  // cookieDomain should be set to '.example.com'
  cookieDomain: '',

  // Custom vars allow you to persist custom data with a chat.
  // This unlocks the potential to design custom routing rules
  // and invitation rules and is also useful for certain CRM
  // integrations.
  customVars: {
    customerId: "s9d8fh9s8dgfsdf",
    cartValue: 53.99
  }
};

const callback = () => {
  // this callback is optional
  console.log("fires after the chat window has been rendered to the DOM.");
};

Velaro.boot(config, callback);

destroy

Destroys the chat instance. This should be called prior to making additional calls to boot.

Velaro.destroy();

mountDynamicButton

Mounts a chat button within the provided DOM element. This button will automatically update as agent availability changes. See https://app.velaro.com/#admin/design/chat-designer?groupId=0&section=popout-button to configure the appearance of the button.

Velaro.mountDynamicButton({
  el: document.getElementById("your-button-container"),
});

isChatAvailable

Requests availability information for the configured group from Velaro servers.

Velaro.isChatAvailable((isAvailable: boolean) => {
  console.log("availability:", isAvailable);
});

expand

Expands the inline chat window.

Velaro.expand();

collapse

Collapses the inline chat window.

Velaro.collapse();

popout

Pops the chat window out into a new window.

Velaro.popout();

isExpanded

Returns true if the chat window is expanded.

console.log("expanded:", Velaro.isExpanded());

onExpand

Fires a callback when the chat window has been expanded.

Velaro.onExpand(() => {
  console.log("expanded.");
});

onCollapse

Fires a callback when the chat window has been collapsed.

Velaro.onCollapse(() => {
  console.log("collapsed.");
});

setLauncherVisibility

Sets the visibility of the inline chat launcher.

Velaro.setLauncherVisibility("hidden");
Velaro.setLauncherVisibility("visible");

addConversion

Creates a conversion record.

Velaro.addConversion({
  // the id of your conversion can be found at
  // https://app.velaro.com/#/admin/visitors/conversions
  conversionId: [your conversion id],

  dollarAmount: 49.99,

  // optional parameters to persist with the conversion
  customData: {
    customerId: '9283gf9823gf98g'
  }
});