Available widgets

Available widgets

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

Message

Used for displaying messages to 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",
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",
cancelMessage: "Not yet",

confirmAction: {
  name: "Confirm Action",
  callback: function() { alert("Confirm button clicked") }
},

displayConditions: {
  showOnInit: true, // if widget should be shown out immediately
  showDelay: 0, // [s] time after which widget should be displayed. overrides showOnInit,
  hideAfter: 0, // [s] how long widget should be on screen before hiding. 0 = no autohide timeout.
  displayWhenElementVisible: '', // tracks page for element, and displays widget when element is visible
  scrollPercentageToDisplay: 0 // displays widget when user is on percent value of scrolling
},

//other params to be specified
});

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"
},

nameField: true,
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: {
  showOnInit: true, // if widget should be shown out immediately
  showDelay: 5, // [s] time after which widget should be displayed. overrides showOnInit,
  hideAfter: 0, // [s] how long widget should be on screen before hiding. 0 = no autohide timeout.
  displayWhenElementVisible: '', // tracks page for element, and displays widget when element
  scrollPercentageToDisplay: 0 // displays widget when user is on percent value
}
});

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",
variant: "A", // 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"
},

header: "Signup for newsletter",
msg: "to get latest info",
okMessage: "Submit",

placeholders: {
  email: "Email Here"
},

displayConditions: {
  showOnInit: true, // if widget should be shown out immediately
  showDelay: 5, // [s] time after which widget should be displayed. overrides showOnInit,
  hideAfter: 0, // [s] how long widget should be on screen before hiding. 0 = no autohide timeout.
  displayWhenElementVisible: '', // tracks page for element, and displays widget when element
  scrollPercentageToDisplay: 0 // displays widget when user is on percent value
}
});

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.