Layout

You can adjust a widget’s layout settings and change its appearance and position. Each widget has its configurations, so you can configure each widget differently. If you want the same configurations for multiple widgets, make sure to update each widget to synchronize displays and behaviors.

All widgets can be modified from User Interfaces

1. Go to User Interfaces

2. Select the widget to modify

3. Click the Layout icon in the bottom-right menu

Template

UI layout

For all widget types, you can try out other layouts to test their appearance and feel. You can see examples of each template here and read more about how they vary.

4. Click the different UI template types to switch between them to choose the type that fits your requirements.

5. Click Save Changes when you’ve selected your new, preferred layout

Note that changing the widget does not change the script, but saving (and thus implementing) may require additional codes to be implemented correctly.

Element Selector

For Embedded and Inline widgets, the CSS Element Selector can be used to customize the position of the Raffle widget. It ensures that the relevant code places the widget accordingly on a webpage.

4. Enter a name for the Element Selector

5. Click Save Changes

You can now incorporate the selector in the relevant code

Backdrop

For Embedded widgets, you can toggle Enable backdrop to allow a backdrop for the Raffle Search. This feature enhances the focus on the widget by visually de-emphasizing the surroundings.

4. Toggle Enable backdrop

5. Click Save Changes

Launcher Button Label

For Launcher widgets, you can set the text displayed on the launcher button (maximum of 30 characters). Leave it empty to display only the search icon.

4. Edit or remove Launcher Button Text

5. Click Save Changes

Placement

For Launcher widgets, you can adjust the vertical and horizontal positions of the widget on the page. This allows you to increase or decrease the space around the widget.

4. Unfold the Placement tab

5. Drag and release the vertical and horizontal pixel bars to match your preferences. Click RESET to return to the default values of 0px.

6. Click Save Changes

Size and Borders

Border Radious

For all widgets, you can set the border radius of the search.

4. Unfold the Size and border tab

5. Select round, squared, or default border radious in the Border Radious menu

6. Click Save Changes

Searchbar Height and Element Height

For the search bar widgets (Embedded, Inline, and Overlay), you can set the height in pixels, with a minimum of 30px and a maximum of 50px.

4. Drag and release the pointer of the vertical and horizontal pixel bars to match your height and width preferences. Click RESET to return to the default values of 0px.

5. Click Save Changes

For Embedded widgets, the Element height can also be adjusted. It is set in the same manner as the Searchbar height, and it is relative to the screen height. The values are in percentage, where 70 means the dropdown takes up 70% of the screen height.