Integrate Wix's Native Color and Font Pickers in a Site Widget's Settings Panel
When creating a settings panel for a self-hosted site widget or a site widget built with the CLI, you can integrate Wix's native color and font pickers. These tools also allow users to select from their site's theme colors and fonts, ensuring seamless alignment with the site's design. If a user selects a theme color or font, your widget's style will automatically update whenever users modify their site's theme settings.
Integrate the color picker in your settings panel
Wix's native color picker allows users to easily select colors from their site's theme colors or pick a custom color. This can be especially useful for widgets that need to maintain design consistency with the rest of the site.
Use the Inputs API's selectColor() function to open the color picker panel in the editor, prompting the user to select a color.
Note: If a user selects a theme color, the returned value contains a CSS variable function. This function dynamically retrieves the value of the corresponding site theme CSS variable. For example, it might return a value like 'var(--wst-color-line, #000000)'.
The following example shows how to create a settings panel that allows users to select and update a background color using the Wix color picker, with the selected color being saved and retrieved using widget.getProp and widget.setProp.
Integrate the font picker in your settings panel
Wix's native font picker allows users to select fonts directly from their site's theme styles or choose custom fonts. This ensures that your widget's typography remains consistent with the rest of the site.
Use the Inputs API's selectFont() function to open the font picker panel in the editor, prompting the user to select a font.
The font picker returns an object containing the user's selected font details, including the font and optionally the textDecoration property.
The value of the font property is a font CSS shorthand property, which can include the following:
- Font family
- Font size
- Font weight
- Font style (supports
italiconly)
Note: If a user selects a theme font style, the returned font property contains a CSS variable function. This function dynamically retrieves the value of the corresponding site theme CSS variable. For example, it might return a value like 'var(--wst-font-style-h2)'.
The value of the textDecoration property is a text-decoration CSS shorthand property. It can also be set to undefined.
The following example shows how to create a settings panel that allows users to select and update a title font using the Wix font picker, with the selected font being saved and retrieved using widget.getProp and widget.setProp.
Load the fonts used within your custom element
When developing custom elements, the page's stylesheet is not aware of the fonts used within the custom element. To ensure that the custom element has access to the required font styles, call setPreloadFonts() from your settings panel. This function sets the list of fonts that are preloaded when the custom element is displayed on a site.
Note: Calling setPreloadFonts() overwrites any fonts that were previously set to be preloaded. This means that any fonts not included in the current call will no longer be preloaded. Make sure to pass all the fonts that need to be preloaded every time you call the function.
Load fonts in a shadow DOM or internal iframe
When working with custom elements that use a shadow DOM or an internal iframe, the page's stylesheet may be inaccessible. To ensure your custom element has access to the required font styles, call getFontsHtml() to retrieve the necessary CSS and load the fonts.
The following example shows how to create a custom element with a shadow DOM that dynamically reads font configuration attributes and applies the specified styles to its content, using getFontsHtml() to load the necessary font CSS: