How to Customize a Widget

We attached a Javascript object called rnwWidget to the window. Configurations, options, translations as well as the widget instance is available under this global object. Because the widgets are asynchronously loaded, the object is not ready when the page (where the widget is embedded) is loaded. Therefore we added a hook to inject configurations and options to the widget before it is created. The following snippet shows how to call configureWidget on your on page:

Bre2

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = function(options) {
        options.widget;
        options.defaults;
    };
</script>

Ela

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = function(options) {
        options.widget;
        options.defaults;
        options.epikOptions;
        options.payment_methods;
        options.validationOptions;
    };
</script>

Lema

In Lema we allow to configure the widget multiple times by pushing the configuration functions to an array. The last pushed configuration function has priority.

Please note: This feature will be soon available in the widget Ela, Servino and Bre2. Use the new style also in the examples below for Lema.

New style

window.rnwWidget.configureWidget.push(function(options){});

instead of the deprecated style

window.rnwWidget.configureWidget = function(options) {};

The other widgets will be updated soon.

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = window.rnwWidget.configureWidget || [];
    window.rnwWidget.configureWidget.push(function(options) {
        options.widget;
        options.defaults;
        options.custom_fields;
        options.epikOptions;
        options.payment_methods;
        options.validationOptions;
    });
</script>

Tamina

<script type="text/javascript">
    window.rnwWidget = window.rnwWidget || {};
    window.rnwWidget.configureWidget = function(options) {
        options.widget;
    };
</script>

Furthermore implementation partner can register event handlers via Javascript to inject own logic and add custom parameters and fields.

The configureWidget method will be called before the widget is created and allows to customize the widget. As argument an options object is given over. This options argument contains the following information :

• widget := the widget instance

• defaults := default values for existing input fields or values for new hidden input fields

• custom_fields := custom fields which will be displaced within the widget

• epikOptions := contains information for initialise payments

• payment_methods := shows the available payment methods

• validationOptions := contains information about client-side validation