The recommendations client renders specific UI components into designated elements on any page. There are also event handlers that you can hook into and respond to user actions.
Every Constructor.io customer will get their own customized version of the recommendations client with preconfigured UI options to match their existing page or provided mock up.
Adding the recommendations client script to your webpage will automatically inject a minimal set of styles onto your page. These styles will only reference areas in the page that are rendered by the client.
When requesting recommendations, you'll need to provide a CSS selector for the HTML element to render the recommendations component into.
In addition, you will also need to pass in a pod identifier to let the client know which pod configuration you would like to use. Pods can be configured on the customer dashboard and allow you to specify the type of strategy you would like to use for each pod.
User related recommendations are used when you want to provide personalized recommendations to a user based on their entire view and purchase history.
Product related recommendations are tied to a product and require an
itemId or a list of
itemIds to be passed in the options object.
Recommendations that are product related are best used when you want to show alternatives to a particular item or set of items. For example, if a user is looking at a toothpaste, these recommendations can show other types of toothpaste.
It also works well for showing items that a user would purchase in addition to a particular item or set of items. For example, if a user is looking at toothpaste, these recommendations can show toothbrushes and dental floss.
When a user interacts with the recommendations client or when Constructor.io services communicate with the recommendations client, the client emits its own events that the page can hook into. Here are a list of the events available and the data that they send.
Note that all events are optional, but that for some events if there are no handlers the recommendations client will handle the event in a sensible manner.
There are a few options for the recommendations client and every option is optional. If an option is missing then the recommendations client does not render that component. On the right is a comprehensive list of the current options we support.
Note that all rendering functions must return either a React Component or an HTML string. If a renderer returns an HTML string it will be run through a sanitizer before rendering for security reasons.
Additionally, all rendering functions take a single argument,
props, of type object. The individual keys on that object vary by rendering function.
Disposing the client will clean up all the listeners and HTML elements that were attached to the page.