When a site signs up for Slickstream, all we usually require is that our embed code be added to the <head> section of each page on the site. For WordPress sites, one option for doing that is to use the Slickstream plugin. With our embed code in place, we can take care of everything: injecting our widgets into the page and configuring them according to your needs.

Each site using Slickstream also gets its own portal at slickstream.com. For example, a site such as supergood.com might have a portal at supergood.slickstream.com where those with permissions can see a full set of analytics and can configure how Slickstream integrates into the site.

For those with web development skills, you may prefer to take greater control yourself over how Slickstream is integrated into your site. I'm going to explain your options in this regard.

Floating Buttons

Slickstream typically injects buttons in the bottom-right corner of each page on the site. Depending on your configuration, this might include search and/or favorite buttons. You can configure these through the Slickstream portal and there isn't usually any need to modify the site to affect their behavior.

Search Integration

Visitors to your site can access Slickstream search by tapping on the floating search button in the bottom-right corner. But most sites have other ways to access search as well. We have the ability to "hook" existing search buttons and search boxes on the site so that tapping on those will also open the Slickstream search panel.

However, we recommend taking direct control of search access. It's easy. Any button or link with an anchor whose href is "#slick-search" will cause the Slickstream search panel to open.

If you like, you can even add buttons/links that open Slickstream search already in a specific mode. You can use any of these anchors:

  • #slick-search
  • #slick-search-favorites
  • #slick-search-popular
  • #slick-search-recent
  • #slick-search-related
  • #slick-search-my-recent
  • #slick-search-ingredients

Recommendation Filmstrip

Slickstream presents recommendations using an infinitely scrollable "filmstrip". We are able to inject this into the page. But this is another example where we recommend that you do this yourself if you are able. This gives you greater control over placement and styling, and it also give users a more seamless experience.

Again, it's easy. Wherever you want to place our filmstrip, just add a container for it on the page and assign its CSS class to "slickstream-filmstrip". For example:

<div class="slickstream-filmstrip"></div>

We will find this container and inject our filmstrip into it automatically and adapt (responsively) to its size. To give viewers the best possible experience, we recommend styling this container with a min-height value of 72px so that the space for the filmstrip is "reserved" in advance while we are loading.

Filmstrip Toolbar

Slickstream has a separate widget that we call the "filmstrip toolbar". This looks almost identical to the Recommendation Filmstrip. But it is a separate widget designed to stick to the top of the page. Many sites use both the filmstrip and filmstrip toolbar. They automatically ensure that only one of them is ever showing at a given time. The filmstrip is typically placed somewhere below the banner and above the body of the post. So as you scroll the page, it scrolls up along with the content. When you have gone down far enough on the page and start scrolling up, the filmstrip toolbar appears at the top of the page.

Typically there isn't anything required on the site to support the filmstrip toolbar. If you want it to "stick to" another sticky banner you have, we can just configure a selector for that other banner for you.

Another option for having a filmstrip that sticks to an existing banner is for you to place a container for our regular filmstrip (as described above) such that that container is attached to your own sticky banner. Our filmstrip will appear whenever its container is visible -- and you can control that in whatever way you choose based on your sticky banner.

Game

Slickstream has a game widget. Again, we are able to inject it into your pages. But if you prefer, you can also create a container for it wherever you want to place it on the page and assign it the "slickstream-game" CSS class. For example,

<div class="slickstream-game"></div>

We will inject a game widget into that container and will adjust to its size accordingly.

Stories

Slickstream has a new product called Stories that is still in beta. This allows you to create Instagram-style multi-page video/image stories that we host for you and can be placed on any webpage.

If you are using stories, it's easy because each story has its own HTML embed code and you can place a story in any location you want by just placing the story's embed code at the appropriate place on the page. You can find the embed code for a story in its sharing dialog.

Topics: Engagement Suite, Documentation

Kingston Duffie

Written by Kingston Duffie

Kingston is the CEO/CTO of Slickstream.

Subscribe Here!