Widget settings can be configured via the user interface on all widget editor pages. Additional logic can be added to dynamically change widget settings in the Advanced options of the widget editor or via widget event listeners. In the Advanced settings you are given callbacks for the lifecycle of the widget. (i.e. Init, Ready, Add, ProductsChange, ect.) where you are typically give the instance of that widget and sometimes the products that it is displaying.

Here we look over most of the settings and where they live within the Rebuy object.

All the settings below are as if there is a reference to a specific widget such as the snippet below. Or, if using the Advanced callbacks and the widget instance is passed into the callback such as the image below.

const widget = window.Rebuy.widgets.find((w) => w.id === "1234");
337337

General

In the general setting you can define what type of product should be returned (onetime, subscription or both) as well as action redirects.

widget.data.settings.close_redirect;
widget.data.settings.decline_redirect;
widget.data.settings.redirect;
widget.data.settings.remove_redirect;
widget.data.settings.show_continue_button;

Recommended Products

This is where you can select the data source (rules as to why certain products are displayed according to input criteria) that will be connected to this widget. You also have access to the endpoint information returned from the API request if you need to add additional logic according to specific rules. You can also return product metafields and variant metafields. These will be returned with the product object and can be accessed in a custom template, event callbacks or event listeners.

376376
widget.data.metadata;
widget.data.products[index_of_product].metafields;
widget.data.products[index_of_product].variants[index_of_variant].metafields;

Discount

Discounts are a visual only tool. This will need to be paired with a Shopify script to discount the products on the backend. These discounts can also be set on the data source for specific products according to specific rule matches.

372372
widget.data.settings.discount;

Timer

A timer can be set to create a sense of urgency for customers to make sure they do not miss out on a special offer. Pairing this with the discount setting and the Limit Number of Views setting under Layout.

371371
widget.data.settings.timer;

Layout

334334 337337 332332
widget.data.settings.display_type;
widget.data.settings.layout;
widget.data.settings.product_options;
widget.data.settings.quantity_inputs;

Placement

The placement selectors use a CSS syntax to attach to an element. This will attach to the first instance of that element so it is best find an element that has a very specific class of id.

334334
widget.data.settings.placement;

Images

Image height and width settings will add fixed height or width to the parent anchor element and dictate the size of all images.

333333
widget.data.settings.images;

Language

Language settings will vary depending on the widget type.

334334 333333
widget.data.settings.language;

Styles

The Custom CSS text area allows you to add CSS as needed. This loads in a stylesheet when the widget loads and so make sure to use specific CSS selectors so that the CSS is not applied to other unintended elements.

🚧

Specify Selectors

This loads a stylesheet to the page along with the widget. If you are not specific with the selectors than other elements on the page may be affected. Also, make sure to use valid CSS or else this will error.

334334
#rebuy-widget-12345 .super-title {
    color: "#000";
    font-size: 20px;
    letter-spacing: 2px;
}

Integrations

Enabling these integrations is a two part step. First, is to navigate to the Integrations tab from the left hand menu. Once this has been done then you will need to select that integration on each widget that you would like to show product reviews for.

332332
widget.data.settings.integrations;

Advanced

In the advanced options you are given access to the widget instance throughout the widget lifecycle. Some of the callbacks also pass in the products array or item added to the cart. This can be extremely powerful when needing to add custom logic and change widget settings on the fly.

336336

Widget tracking will add product properties to the product object. We use these properties in order to track sales contributed by these widgets, auto remove items for Gift With Purchase type widgets along with other subtle functionality of the widgets.

334334

You can access all of the widget settings and information directly from the widget instance that is passed into the callback.

widget.data.settings;

Use Case

You may want a popup widget to display according to some custom logic that is not available by using the connected Data Source for that widget. This could be used in the Ready callback

In this example we are manipulating the popup trigger to "manual" which means that the popup will only show by running the widget.show(); method. Where, typically the popup widget would show according the the rules of the connected Data Source.

widget.data.pop_up_trigger = "manual";
if ("some custom logic") {
  widget.show();
}
335335