Color themes, placeholders and images

Color themes

Users can pick one of 4 default color themes: “default”, “light” and “dark” or “custom” which can be further customized by changing ‘colors’ property of a widget like shown in example below.

var widget1 = new pathfora.Message({
   layout: 'button',
   position: 'left',
   msg: 'light button',
   id: 'light-widget',
   theme: 'light'
});

var widget2 = new pathfora.Message({
   layout: 'button',
   position: 'right',
   msg: 'dark button',
   id: 'dark-widget',
   theme: 'dark'
});

var widget3 = new pathfora.Message({
   layout: 'button',
   position: 'top-left',
   msg: 'custom color button',
   id: 'custom-widget',
   theme: 'custom',
   colors: {
     background: '#fff'
   }
});

var widget4 = new pathfora.Message({
   layout: 'button',
   position: 'top-right',
   msg: 'default button',
   id: 'default-widget'
});

pathfora.initializeWidgets([ widget1, widget2, widget3, widget4 ]);

Instead of editing colors from the config object, one can also target css classes for changing it, keeping in mind that the “colors” property should be empty in this case (otherwise it would override style property of the DOM elements)

Editable widget elements

Form, Subscription and SiteGate widgets also offer editable placeholders' values:

var form = new pathfora.Form({
  // ...
  
  placeholders: {
    name: 'Name',
    title: 'Title',
    email: 'Email',
    message: 'Message'
  }
  
  // ...
});

var subscription = new pathfora.Subscription({
  // ...
  
  placeholders: {
    email: 'Email'
  }
  
  // ...
});

var siteGate = new pathfora.SiteGate({
  // ...
  
  placeholders: {
    firstName: 'First Name',
    lastName: 'Last Name',
    email: 'Email',
    organization: 'Organization',
    title: 'Title'
  }
  
  // ...
});

Images

All widgets have an option to add an image to the description:

image: 'myimage.jpg',