In your dashboard you can edit your sites' settings, such as:

• Which emojis to show as reaction options
• How many times someone can react to a page
• What text to show to the user
• How the reaction widget should look like (bordered, vertical/horizontal, etc.)

Note: you must find the DOM Selector for the element on your page(s) that you want the reactions to be added to. For example, if you are adding Web Reactionz to a blog, you will need the DOM selector of your main blog content. Then, your reactions will automatically be added to e.g., the top of your blog content.

To find the DOM selector, right click on your page content in your web browser, and choose 'Inspect Element'. A new tool will open that shows the elements of your webpage. Hover over the selected element, or parent elements above it, to find the first element that causes your entire content to be highlighted. Then, right click on the element, click 'Copy' and 'Copy selector'. Paste this into your dashboard.

Your dashboard shows the total number of each reaction received for each of your sites and their pages.

Clicking on a page will show graphs showing how the number of reactions has changed over time, or let you look at a specific day to see the breakdown of reactions.

The Web Reactionz script exposes the WebReactionz JavaScript class to the page to enable further customisation (or, per-page overrides). By default, this is automatically constructed and initialised when you include the script on your page. By default, the settings defined in your dashboard are also automatically fetched to render the widget as you configured.

You can change these behaviours by setting the following attributes on the script tag when including it:

• data-noautoinit='1', to disable auto-initialisation. This is required if you wish to use JavaScript to configure your settings.
• data-noautofetch='1', to disable auto-fetching of the configuration. This is useful if you intend to specify all of the configuration options in code, so can reduce the size of the network response.

If you disable auto-initialisation, you must manually initialise it in JavaScript with the following options:

new WebReactionz({
  // Your Site ID, found in your dashboard
  siteId?: string,
  // The CSS selector of the DOM element where the widget should be added
  domSelector?: string,
  // Whether to auto-fetch your site's dashboard configuration options on page-load
  noAutoFetch?: number | boolean,
  // The base URL of the server hosting the script (defaults to 'https://WebReactionz.com')
  baseUrl?: string,
  // The ID to give the page (defaults to the full path of the URL); can provide a function returning the ID
  pageId?: string | () => string,

  // Widget options, as found in your dashboard:
  layout?: 'horizontal' | 'vertical', // defaults to 'horizontal'
  position?: 'top' | 'bottom' | 'left' | 'right', // defaults to 'top'
  prompt?: string, // defaults to ''
  showReactionCounts?: boolean, // defaults to true -- but has no effect if disabled in the dashboard
  bordered?: boolean,
  fontSizeScale?: number,
  fontColor?: string,
  theme?: 'minimal' | 'multiline',
}).init()

If you do not wish to use JavaScript to configure the above options, all are also passable as data-* attributes on the script tag by converting the field name to lowercase, without underscores (e.g., noAutoFetch becomes the data-noautofetch attribute). However, this has limitations such as not being able to provide a custom function to compute the pageId.

Note that all fields are optional, however at a minimum siteId and domSelector must be provided as either a data-* attribute or as a JS option.

You can configure options via the dashboard, data-* attributes, JS, or a mixture of all three. The order of precedence for configuration options is as follows: JS > data attribute > dashboard configuration.

The Web Reactionz script imports a CSS file for all styling. If you wish to change the look of any element of the widget, please override the CSS styles as desired.

It is usually easiest to inspect the styles within your web browser and tweak them as required, however a summary of the CSS classes used is below:

• .webReactionz — parent wrapper
• .webReactionz .increment — '+1' wrapper (used in combination with .active to only show on click)
• .webReactionz .emojis — emojis wrapper
• .webReactionz .reaction — emoji + increment wrapper
• .webReactionz .emoji — an emoji
• .left,.right,.top,.bottom,.vertical,.horizontal — as per the configuration options