Slickstream Integration for Web Developers

Much of Slickstream's functionality and appearance can be configured in the user portal.  However, for those looking for more control there are several options for customizing Slickstream to more tightly integrate into a site.

Slickstream consists of a set of GUI components that are injected into a website that exploit a set of cloud based services.  The services include search, recommendations, membership, favorites, integrations and analytics.

Below is an overview of the options available to control and exploit these components and services.

APIs

Javascript API:  This API can be used to access Slickstream membership and favorite functionality from inside the browser.  Use cases include adding custom buttons or links, for example "Save to my favorites" or "Sign In" that interact directly with the Slickstream favorite and membership system or offloading your WordPress membership system. This API is documented here.

REST API:  This API can be used to access site summary analytics and the analytics for each page on the site.  The primary application for this API is to provide a means for third party products to access Slickstream's analytics.  This API is documented here.

Search Links

The Slickstream search panel is the key component for the presentation of search results and site members's favorite lists.  As part of a site's configuration, Slickstream adds floating buttons and/or hooks existing search boxes/icons so that they will open the search panel.  However, it is also possible to build buttons or links that will open the search panel directly.  By adding the appropriate href to any button or link, the search panel can be opened in the desired state.  The supported links are listed here.

GUI Components

Slickstream provides the following GUI components:

Filmstrip:  An in-content filmstrip of content links.

Filmstrip Toolbar:  A top of page toolbar style filmstrip of content links.

Floating Buttons:  A set of floating action buttons.

Dynamic Content Module:  An in-content or sidebar grid or carousel of content links.  See DCM examples here.

Search Panel:  An overlay panel that presents search results and member's favorite lists.

Positioning

As part of onboarding Slickstream support will inject the various GUI components into a site based on feedback from the publisher.  However, there are two additional ways that the location of components can be controlled.  First for WordPress based sites, there are a set of widgets and shortcodes that are documented here.

Additionally, for the Filmstrip and Dynamic Content Module, Slickstream will inject these into any div manually placed on the page with the appropriate class.  Specifically:

Filmstrip: class="slick-film-strip"

Dynamic Content Module: class="slick-inline-search-panel"

Additional CSS can be added to these divs, ex. padding, margin, etc. to further control the positioning.

Styling

To understand how to style each of the Slickstream components requires a quick review of how these components are coded.

Slickstream GUI components are based on Web Component technology and are injected into the page inside a shadow DOM. There are several reasons for this, but the main one is that a shadow DOM allows Slickstream to isolate the styling of these components from other styles already present on the page.  This technology is what ensures Slickstream components can be injected into pages with minimum styling code and still look seamlessly integrated.  

However, this means that adding standard CSS styling to Slickstream components will have no impact.  To style Slickstream components there are a set of properties that Slickstream has defined which "cross" the shadow DOM boundary. Adding these properties to the Slickstream components in the same way that standard CSS is added, will directly control the styling of these components.  The properties available to style each Slickstream component are documented at the links below.

• Filmstrips, floating buttons, search panel properties
• More specific filmstrip styling properties
• DCM and Search Panel styling properties

With the above set of options it is possible for web developers to exercise tight control over the look and feel of Slickstream functionality.  If there are additional styling properties or functionality that aren't covered here, please contact us at Slickstream Support and we'll look at adding them.