Available widgets

Available widgets

Currently Pathfora has 4 widget types available - Message, Subscription, Form and a Site Gate. All the widgets can be displayed to users in different layout configurations like modal, bar etc. Available layout options depend on a widget type.

Message

Used for displaying messages to the user. Optional action button allows running callback function or opening links.

Usage

Minimum configuration

var defaultPromo = new pathfora.Message({
  layout: 'modal',
  msg: 'Welcome to our website'
});

Full configuration

var promoWidget = new pathfora.Message({
  id: 'promo-widget',
  className: 'my-class',
  layout: 'slideout', // [ modal, bar, button, inline ]
  position: 'left', // [ left, right, bottom-right, top-left, top-right ]
  variant: 'A',
  cancelButton: true,
  iconClass: 'pathfora-default',
  theme: 'custom', // [ default, light, dark ]
  colors: {
    background: '#ddd',
    header: '#333',
    text: '#333',
    close: '#999',
    actionText: '#333',
    actionBackground: '#eee',
    fieldBackground: '#fefefe'
  },
  msg: 'Example message', 
  header: 'Welcome on my page',
  message: 'Example message',
  okMessage: 'Got it',
  cancelShow: false,
  confirmAction: {
    name: 'Confirm Action',
    callback: function() { 
      alert('Confirm button clicked') 
    }
  },
  displayConditions: {
    /* additional display conditions of the widget. */
    /* see Display Conditions subsection */
  }
});

Email form

Simple contact form for writing email messages.

Usage

Minimum configuration

var defaultPromo = new pathfora.Form({
  layout: 'modal',
  msg: 'Welcome!'
});

Full configuration

var promoWidget = new pathfora.Form({
  id: 'form-widget',
  className: 'my-class',
  layout: 'folding', // [ modal, slideout ]
  position: 'bottom-left', // [ left, right, bottom-right, top-left, top-right ]
  theme: 'custom', // [ default, light, dark ]
  colors: {
    background: '#ddd',
    header: '#333',
    text: '#333',
    close: '#999',
    actionText: '#333',
    actionBackground: '#eee',
    fieldBackground: '#fefefe'
  },
  titleField: false,
  header: 'Welcome to my page',
  msg: 'Example message',
  okMessage: 'Sign up',
  placeholders: {
    name: 'Name Here',
    email: 'Email Here',
    title: 'Title Here',
    message: 'Message Here',
  },
  displayConditions: {
    /* additional display conditions of the widget. */
    /* see Display Conditions subsection */
  }
});

Social networks integration

See Social Networks Integration subsection.

Subscription

Subscription widget allows user for submission of email addresses.

Usage

Minimum configuration

var defaultPromo = new pathfora.Subscription({
  layout: 'modal',
  msg: 'Subscribe!'
});

Full configuration

var promoWidget = new pathfora.Subscription({
  id: 'subscription-widget',
  className: 'my-class',
  layout: 'folding', // [ modal, slideout, bar ]
  position: 'bottom-left', // [ left, right, bottom-right, top-left, top-right ]
  variant: 'A',
  theme: 'custom', // [ default, light, dark ]
  colors: {
    background: '#ddd',
    header: '#333',
    text: '#333',
    close: '#999',
    actionText: '#333',
    actionBackground: '#eee',
    fieldBackground: '#fefefe'
  },
  header: 'Signup for newsletter',
  msg: 'to get latest info',
  okMessage: 'Submit',
  placeholders: {
    email: 'Email Here'
  },
  displayConditions: {
    /* additional display conditions of the widget. */
    /* see Display Conditions subsection */
  }
});

Social networks integration

See Social Networks Integration subsection.

SiteGate

Form widget

Usage

Minimum configuration

var defaultPromo = new pathfora.SiteGate({
  header: 'Please submit your data',
  msg: 'Submit this data to enter the website'
});

Full configuration

var promoWidget = new pathfora.SiteGate({
  id: 'subscription-widget',
  className: 'my-class',
  layout: 'modal',
  position: '', // [ left, right, bottom-right, top-left, top-right ]
  variant: 'A',
  theme: 'custom', // [ default, light, dark ]
  colors: {
    background: '#ddd',
    header: '#333',
    text: '#333',
    close: '#999',
    actionText: '#333',
    actionBackground: '#eee',
    fieldBackground: '#fefefe'
  },
  header: 'Please submit your data',
  msg: 'Submit this data to enter the website',
  okMessage: 'Submit',
  showForm: true, // show verbose input form
  showSocialLogin: false, // show social network login buttons
  placeholders: {
    firstName: 'First Name',
    lastName: 'Last Name',
    email: 'Email',
    organization: 'Organization',
    title: 'Title'
  },
  required: [
    'firstName',
    'lastName',
    'email'
  ],
  displayConditions: {
    /* additional display conditions of the widget. */
    /* see Display Conditions subsection */
  }
});

Social networks integration

See Social Networks Integration subsection.

Available layouts

• Modal - Covering entire screen.
• Slideout - Sliding from left or right side of a screen
• Folding - Stays always on the screen.
• Bar - Positioned on top or bottom of a page. Scrolling with page, or stays at place.
• Button - Simple call for action. Allows chaining other widgets for example opening modal.
• Inline - Allows displaying message in specified html element.

Display conditions

See Display Conditions subsection.