Button Widget Setup Guide

Content

Overview
How to Add a Button Widget
Button Configuration Settings
Implementation Examples
Troubleshooting

Overview

The Button widget in Mimeeq allows you to create interactive buttons that trigger rules when clicked. These buttons can be used to enhance your configurator's functionality by resetting options, navigating between groups, or creating step-by-step workflows.

Common Use Cases

Reset Options: Clear selected options within a group
Navigation: Create "Next" buttons to guide users through a step-by-step configuration process
Events: Trigger specific events for integration with your website

Navigate to Admin Settings
Open your configurator
Go to the Options tab
Click New Option
Select Button as the mode
Configure your button settings

Button Configuration Settings

Setting	Options	Description
Name	Simple input field	The button label
Button Width	Full Width, Half Width	Full Width: Button spans the entire container width. Half Width: Button takes up 50% of the container width. To create a 50-50 split, add two separate half-width button widgets to the same group
Button Size	Small, Medium	Small: Compact button size for minimal layouts. Medium: Larger button size for better visibility
Text Case	Normal, Uppercase	Normal: Standard text capitalization. Uppercase: All text displayed in uppercase letters
Button Variant	Filled, Outlined, Text	Filled: Solid background color with text. Outlined: Border with transparent background. Text: Text-only button without border or background
Button Shape	Pill, Rectangle, Rounded	Pill: Fully rounded edges for a modern look. Rectangle: Square corners for a classic appearance. Rounded: Slightly rounded corners for a soft edge
Button Colour	Accent, Accent Light, Gray, Custom	Accent: Uses your main theme color. Accent Light: Lighter shade of your theme color. Gray: Predefined gray color scheme. Custom: Define your own color scheme
Default Button Background	Colour picker field	Background color of the button in its normal state. Available when "Custom" is selected for Button Color
Hover Button Background	Colour picker field	Background color when user hovers over the button. Available when "Custom" is selected for Button Color
Default Text Colour	Colour picker field	Text color of the button in its normal state. Available when "Custom" is selected for Button Color
Hover Text Colour	Colour picker field	Text color when user hovers over the button. Available when "Custom" is selected for Button Color
Event Name	Simple input field	Custom event name for JavaScript integration on your website (optional)
Button Preview		Live preview of the button widget

Implementation Examples

Example 1: Reset Button

In this example, we'll create a reset button for a "Design Cover" group:

Create a button widget named "Reset Design Cover"
Add it to the "Design Cover" group
Configure a rule to reset the cover options when clicked
The button will automatically hide when there are no selections to reset

Create a guided configuration flow:

Add a "Next" and "Previous" button at the end of each group
Configure the button to open the next group when clicked
Optionally, add a rule to rename the current group after navigation
This creates a step-by-step process that guides users through your configurator

Troubleshooting

Buttons Not Appearing

Verify the button widget is properly added to a group
Ensure the button width settings match your layout requirements

Half-Width Buttons Not Aligning

Confirm you've added exactly two half-width buttons to the same group
Check that both buttons have the same size and styling settings

Custom Colors Not Working

Verify you've selected "Custom" in the color options
Ensure all four custom color fields are properly filled
Check that color values are in the correct format

Updated on: 21/11/2025

Was this article helpful?

Thank you!