QA your widget

The Widget CLI allows you to test your widget before rolling it out in production.

Install it by entering npm install -g @abtasty/widget-cli.

Then, to test your widget, simply use this command from the root of your widget folder:

widget serve

An interface will then pop up on your screen, allowing you to test your widget with different configurations. Here are some examples of configuration options:

• Url (indicate which website you want to test your widget on).
• User-agent/resolution (responsive mode).
• Configure the form on the left hand side to check the wysiwyg configuration options.

What it looks like:Configuration form preview

Enables you to preview the rendering of the configuration form you have built. This configuration form is a simple JavaScript object.

Please check out the configuration form documentation for more details about its creation.

A "Dev tools" button enables you to track errors within your configuration form to help with debugging. Clicking it will open a separate console related exclusively to the configuration form.

The "webpage" view

Finally, the webpage view on the right-hand side loads the URL of your choice (AB Tasty's corporate website by default) and injects your widget onto the page. It takes into account the fields of the configuration form that are visible on the left-hand side.

The "Live reload" option is enabled by default, meaning that the view will be re-loaded automatically each time a change is made to the configuration form.

Similarly to the configuration form view, you can access a "Dev tools" button, which opens a separate console to debug interactions between the widget and the website once your widget is injected. This enables you to debug the code of your widget in a production-like environment.