# Custom widgets ## What is a Custom Widget? A Custom Widget is a group of reusable code snippets powered by ABTasty's functionalities, it may be CSS only, but can include an html template to use in javascript. Custom Widgets allows you to use the editor's forms pieces to allow non technical users to edit the content of the Custom Widget, this way, technical users are able to focus on Custom Widgets creation while non technical user focus on the content of it. ## How to create a Custom Widget You can access the Custom Widgets page there: On that page you'll be able to create a Custom Widget from blank, but also edit, duplicate or remove an existing one. You can also access the library of already created Custom Widgets in editor. ### How to use? In editor, you will find 3 tabs in Custom Widget form : * Form: This is the part on which non technical users will be able to edit a Custom Widget thanks to the js form done in code tab section by technical user. * Code: As a technical user, you'll put there the snippets needed to make the Custom Widget works, `JS`, `CSS`, `HTML` and `JS Form`. * Assets: You'll find here the list of assets linked to that Custom Widget, you'll be able to add some new ones once the Custom Widget has been saved. #### **As a developer** You'll be able to fill the different code inputs, and variables defined in `JS Form` as `propName` are provided into `HTML`, `JS` and `CSS`. Do not hesitate to consult the [complete documentation](/client-side/custom-widgets/widgets-getting-started/custom-widgets-form.md) about how to build a form for your Custom Widget. In `HTML` and `CSS` you can use variables anywhere by using this template: `{{variableName}}`, the code is parsed to replace the detected variables automatically. In the javascript file, the variables are provided within a `DATA` object which you can access within your code. You can find examples of Custom Widgets by default on your account, `Download button with background gradient` is a simple one, `Wheel of fortune` is a more complex one with very complete form. `CSS` is handled automatically on editor and on production, it is inserted in a dedicated `style` tag on the `head`. `HTML` is provided to your javascript, with variables in it already replaced, it's still `HTML` as string and not a DOM element in order for you to work with it as you want. The main `Javascript` is launched within your campaign right after `CSS` is inserted to avoid style issues with your `HTML` once inserted in DOM. You're the master of your script, ABTasty is only launching it in a new function and provides following arguments to it: `HTML`, `DATA`, `UNIQUE_ID`, `TEST_ID`, `HELPERS` and `$`, `jQuery` (only if your account is set to use jQuery). Arguments in details: * `HTML`: an HTML `string` that you can use to insert into DOM, parse in a DOM element to edit, manipulate, etc. * `DATA`: an `object` tthat contains all the datas user have set in the form, `key` is the `propName` you've defined, and `value` is either the default or the one set by user if set. * `UNIQUE_ID`: a `string` which as it's named, it's an id to help you create unique keys, `id`, `className`, `storage`, etc. * `TEST_ID`: a `number` to get current test id in your cade and send tracking informations easily. * `HELPERS`: the common object provided in every custom script, more informations [here](/client-side/custom-widgets/widgets-getting-started/custom-widgets-helpers.md). **As a non technical user** You should ensure while providing your request to developer what parameters you want to be able to change in the Custom Widget in order to be able to reuse it across multiple campaigns later. Then once your Custom Widget is ready, test it carefuly, and then you're ready to use it across campaigns by using the Custom Widget in these and editing editable parameters in `form` tab. More complete user documentation [here](/web-experimentation-and-personalization/editors-and-widget/list-of-widgets/custom-widget.md). \\ --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.abtasty.com/client-side/custom-widgets/widgets-getting-started.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.