Filmstrips, Toolbars, and How They Fit on Your Site

One of Slickstream's engagement suite feature is our "filmstrip" widget. This is a scrolling carousel of recommended posts. The recommendations adapt to the context. Viewers can scroll to find interesting posts and click on one to navigate to it.

The filmstrip can appear in two different ways on your site: inline within your page or as a "toolbar" stuck to the top of the page. We talk about these as two different widgets: the "filmstrip" (inline in the page), and the "filmstrip toolbar" (stuck to the top of the page).

The filmstrip toolbar is positioned in an absolute way. We are able to place it at the top of the page, or to attach it to the bottom of another sticky header/banner if your site has one. Currently we do not let you directly configure these options. You simply choose whether you want the filmstrip toolbar or not on your pages. Let us know if you'd like it to appear in a different way and we'll try to help.

The filmstrip, on the other hand, is designed to sit inline within your page. As the viewer scrolls, the filmstrip moves along with the rest of the content. Typically the filmstrip appears below the page banner and above the content -- although it could appear just about anywhere.




When we set up a site for you, we do the work to position the filmstrip on your pages. This avoids you having to adjust your theme or templates to accommodate it. We accomplish this by injecting the widget into your page based on existing containers within your page's DOM (document object model).

In the new Config page for your site, on each page group tab, you'll see a section for configuring the filmstrip on those pages. There are three options.




auto-inject: This means that we will inject a filmstrip at a location that we determined on the page when we set up your site -- typically just below the page banner/header -- although that may vary depending on the nature of your page layouts. We currently do not let you reconfigure this injection point directly. But if you contact us, we can make changes as needed.

do-not-inject: This one is easiest to understand. It means that on the pages associated with the given group, the filmstrip will not appear inline in the content. (The filmstrip toolbar is controlled separately for each page group.)

inject-within-container: If you would like more control over where the filmstrip appears within your page, this option is for you. You (or your web developer) will need to add a

<div class="slick-film-strip"></div>

container into your page layout where you want the filmstrip to appear. Once Slickstream is loaded, it will populate that container. This has the added benefit that you can control the min-size of this container (using CSS styling) so that the space for the filmstrip is pre-allocated so that the page does not "jump" after Slickstream loads. If you use this option, be careful to consider all page layouts from mobile to large desktops. The filmstrip will adapt properly to the size of its container.