A slideout is a medium module which slides from either side into the window. This module provides a good amount of space for text and content without taking the full attention of the user.


Position of the slideout module relative to the browser window.

position string
Value Behavior
bottom-left default display the module in the bottom left corner of the window
bottom-right display the module in the bottom right corner of the window
left display the module in the center left of the window
right display the module in the center right of the window
top-left display the module in the top left corner of the window
top-right display the module in the top right corner of the window

Positions - Live Preview

Position Slideout Modules


Optionally define the DOM selector of the parent element you would like to insert the module into an element besides the document body.

Note: Because slideouts use the position: fixed css rule your button may or may not "appear" within your selected element, so while the HTML for your slideout will be inserted into the DOM element defined by positionSelector it will appear fixed and full width on the page.

positionSelector string
Value Behavior
selector Javascript selector of an existing div on the page where the module should appear.

Custom Position - Live Preview


Origin is the direction from which the the module will slide in.

origin string
Value Behavior
left default for bottom-left positioned modules
right default for bottom-right positioned modules
bottom module slides up from the bottom of the window

Bottom - Live Preview


Variant determines any extra content that may be used by the module.

variant int
Value Behavior
1 default text-only-module
2 module includes an image
3 module includes a content recommendation


Define the featured image you would like to use for the module.

Note: This setting is only valid for modules with a variant value of 2.

Key Type Behavior
image string URL of the image to feature

Image (variant 2) - Live Preview

Image Slideout Module