@livechat/widget-vue/v2/LiveChatWidget.esm.js

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

import { createWidget } from '@livechat/widget-core';

var LiveChatWidget = {
  props: {
    license: {
      type: String,
      required: true
    },
    group: {
      type: String,
      required: false,
      "default": undefined
    },
    visibility: {
      type: String,
      required: false,
      "default": undefined
    },
    customerName: {
      type: String,
      required: false,
      "default": undefined
    },
    customerEmail: {
      type: String,
      required: false,
      "default": undefined
    },
    sessionVariables: {
      type: Object,
      required: false,
      "default": undefined
    },
    chatBetweenGroups: {
      type: Boolean,
      required: false,
      "default": undefined
    },
    customIdentityProvider: {
      type: Function,
      required: false,
      "default": undefined
    }
  },
  emits: ['ready', 'new-event', 'form-submitted', 'rating-submitted', 'greeting-hidden', 'greeting-displayed', 'visibility-changed', 'customer-status-changed', 'rich-message-button-clicked', 'availability-changed'],
  data: function data() {
    return {
      widget: null
    };
  },
  watch: {
    license: 'reinitialize',
    group: 'reinitialize',
    chatBetweenGroups: 'reinitialize',
    visibility: function visibility(_visibility) {
      var _this$widget;

      (_this$widget = this.widget) === null || _this$widget === void 0 ? void 0 : _this$widget.updateVisibility(_visibility);
    },
    customerName: function customerName(name) {
      var _this$widget2;

      (_this$widget2 = this.widget) === null || _this$widget2 === void 0 ? void 0 : _this$widget2.updateCustomerData({
        name: name
      });
    },
    customerEmail: function customerEmail(email) {
      var _this$widget3;

      (_this$widget3 = this.widget) === null || _this$widget3 === void 0 ? void 0 : _this$widget3.updateCustomerData({
        email: email
      });
    },
    sessionVariables: function sessionVariables(_sessionVariables) {
      var _this$widget4;

      (_this$widget4 = this.widget) === null || _this$widget4 === void 0 ? void 0 : _this$widget4.updateSessionVariables(_sessionVariables);
    }
  },
  mounted: function mounted() {
    this.setupWidget();
  },
  unmounted: function unmounted() {
    var _this$widget5;

    (_this$widget5 = this.widget) === null || _this$widget5 === void 0 ? void 0 : _this$widget5.destroy();
  },
  methods: {
    setupWidget: function setupWidget() {
      var _this = this;

      this.widget = createWidget({
        group: this.group,
        license: this.license,
        customerName: this.customerName,
        customerEmail: this.customerEmail,
        sessionVariables: this.sessionVariables,
        chatBetweenGroups: this.chatBetweenGroups,
        visibility: this.visibility,
        customIdentityProvider: this.customIdentityProvider,
        onReady: function onReady(data) {
          return _this.$emit('ready', data);
        },
        onNewEvent: function onNewEvent(event) {
          return _this.$emit('new-event', event);
        },
        onFormSubmitted: function onFormSubmitted(form) {
          return _this.$emit('form-submitted', form);
        },
        onRatingSubmitted: function onRatingSubmitted(rating) {
          return _this.$emit('rating-submitted', rating);
        },
        onGreetingHidden: function onGreetingHidden(greeting) {
          return _this.$emit('greeting-hidden', greeting);
        },
        onGreetingDisplayed: function onGreetingDisplayed(greeting) {
          return _this.$emit('greeting-displayed', greeting);
        },
        onVisibilityChanged: function onVisibilityChanged(visibility) {
          return _this.$emit('visibility-changed', visibility);
        },
        onCustomerStatusChanged: function onCustomerStatusChanged(status) {
          return _this.$emit('customer-status-changed', status);
        },
        onRichMessageButtonClicked: function onRichMessageButtonClicked(button) {
          return _this.$emit('rich-message-button-clicked', button);
        },
        onAvailabilityChanged: function onAvailabilityChanged(availability) {
          return _this.$emit('availability-changed', availability);
        }
      });
      window.__lc.integration_name = "@livechat/widget-vue/v2";
      this.widget.init();
    },
    reinitialize: function reinitialize() {
      var _this$widget6;

      (_this$widget6 = this.widget) === null || _this$widget6 === void 0 ? void 0 : _this$widget6.destroy();
      this.setupWidget();
    }
  },
  render: function render() {
    return null;
  }
};

export { LiveChatWidget };