Adding a custom selector to trigger the widget

Adding a custom selector to trigger the widget

Overview

The Productstash widget can be configured to display in a number of different ways. The following display scenarios are supported:
  1. Default floating icon only
  2. Default floating icon only, but with a custom icon
  3. Default floating icon + Custom Selector
  4. Custom Selector only

Default floating icon only

This is the default display of the widget. By default, the Productstash widget will display as the following:


Default floating icon only, but with a custom icon

The default floating icon can be customised in the following ways:
  1. Color
  2. Icon
In order to customise your icon, head over to the Embed settings:

Default floating icon + Custom Selector

In addition to the default floating icon, you can add your own custom selector that launches the Productstash widget. This can be any element you like - a button, a menu item, a link etc. To do this, you must add the onclic function Productstash.show() to the element, for example:

<div id="example" onclick="Productstash.show()">What's new</div>

Custom Selector only - hide the default icon

The Productstash widget can be triggered by a custom HTML element which will then replace the default bell icon.

To get started, you need to add the custom HTML element to your webpage(s), and the element needs a unique ID; for instance:

<div id="example">What's new</div>

Once this has been added to your webpage(s), head over to your Embed Code settings page, and add your custom HTML ID (in this case, the example is "#example") and ensure the 'Use custom HTML selector' is on:




Save these settings, and your custom element will now override the default Productstash bell.

Functions

The Productstash widget has a number of available functions that can be called manually to perform various behaviours. This is an ever-growing list, check back regularly for new operations, or request new features.
 
Option
Description
Productstash.show()
Opens the Widget.
Productstash.hide() 
Closes the Widget.


    • Related Articles

    • Configuring your Widget

      What is the Widget? The Updates Widget is a stream of your latest update posts which can be embedded within your website in the form of a pop-out side bar. Here you can see ours in action: Customisation options The Widget and its content can be ...

    • Widget JavaScript Options

      Configuration Options The following options can be added to your Widget settings in order to identify users and segment posts.  Option Type Required Description workspace_id String Required The id of the Workspace that the widget belongs to. name  ...

    • Adding Quick Links to your Widget

      What are quick links? The Updates Widget can include up to 5 custom quick links that appear at the top of the widget. Here's our example, which currently has 4 added: All quick links open the link within a new tab, rather than within the embedded ...

    • User Segmentation

      What is User Segmentation? User segmentation is a powerful tool used in marketing to target specific groups of customers. While it sounds like a fancy term, user segmentation is simply the dividing of users based on specific factors into different ...