PopupWidgetQ

Vue.js popup widget

Getting started

Installation

1. Install:

npm install popup-widget-q

2. Add to project globally (main.js):

import PopupWidget from 'popup-widget-q'

Vue.use(PopupWidget)

Add locally to the component:

import { PopupWidget } from 'popup-widget-q'

export default {
  components: {
    PopupWidget
  }
}

Use Widget

<template>
  <popup-widget
    :iconPath="widgetIconPath"
    :defaultMode='`expanded`'
    :autoexpand='false'
    :autoexpandMs='2000'
    :closeByEsc='true'
    :widgetColor="`#FFB500`"
    :position="{
        bottom: position.bottom,
        right: position.right,
    }"
    :stopAutoexpand="!autoexpandNewsletterModal"
    @onMinimized="onMinimized"
    :showDelayMs='8000' >

  </popup-widget>
</template>

Available Props

|Prop |Type |Default |Description| |----------------|-------|---------|------------| |defaultMode |String |null |default mode to pop up. Can be 'minimized' or 'expanded'| |text |String |null |text content for expanded modal if no slot provided| |title |String |null |title for expanded modal if no slot provided| |iconPath |String |null |url for mimnimized widget icon| |iconText |String |'🎁' |text showing on minimized widget if no icon path provided| |autoexpand |Boolean|false |true/false autoexpand after autoexpandMs| |autoexpandMs |Number |7000 |ms to autoexpand| |closeByEsc |Boolean|true |minimize or not widget by Esc button| |widgetColor |String |'#9ec939'|color for minimized widget backgroud color| |fontColor |String |null |color for icon (if iconText provided). Autoselect (black/white if null)| |showDelayMs |Number |0 |ms delay to show| |position |Object |{bottom: '30px', right: '30px'} |css top, bottom, right or left attributes for fixed position | |stopAutoexpand|Boolean|false |you can pass this prop to stop autoexpand |

Available Hooks

onMinimized - called after widget is minimized