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",
        message: "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",
        cancelText: "#333",
        cancelBackground: "#eee"
    },
    message: "", //overridden by messages object; either object with specyfic user types or single message
    messages: {
        newcomer: {
            header: "Welcome on my page",
            message: "Example message",
            actionButton: "Got it",
            cancelButton: "Not yet"
        },
        commonUser: "",
        subscriber: ""
    },
    actions: {
        newcomer: action1,
        commonUser: action2,
        subscriber: action3
    },
    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: <element_id>, // tracks page for element, and displays widget when element
        scrollPercentageToDisplay: <0-100> // displays widget when user is on percent value
    },
    
    //other params to be specified
});

Email form

Simple contact form for writing email messages.

Usage

Minimum configuration

var defaultPromo = new Pathfora.Form({
        layout: "modal",
    }
);

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,
    message: "", //overridden by messages object; either object with specyfic user types or single message
    messages: {
        header: "Welcome on my page",
        message: "Example message",
        button: "Sign up",
    },
    placeholders: {
        name: "",
        email: "",
        title: "",
        message: "",
    },
    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: <element_id> // tracks page for element, and displays widget when element
        scrollPercentageToDisplay: <0-100> // 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",
    }
);

Full configuration

var promoWidget = new Pathfora.Subscription({
    id: "subscription-widget",
    className: "my-class",
    layout: "folding", // modal, slideout, bar
    // position: "bottom-left" - used only when bar layout is chosen
    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"
    },
    nameField: true,
    titleField: false,
    message: "", //overridden by messages object
    messages: {
        header: "Signup for newsletter",
        message: "to get latest info",
        button: "Send",
        placeholder: ""
    },
    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: <element_id> // tracks page for element, and displays widget when element
        scrollPercentageToDisplay: <0-100> // 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.