Configure your widget · 3:57 · English

Match your widget to your website

Adjust the widget’s colors, fonts, forms, charts, and sizes, then review the saved design across vehicle results and quoting.

Before you start

An installed widget. Advanced branding is available on Plus, Pro, and Max.

Recorded in the Remapdb demonstration environment with example data. Use your own account details and review the saved result.

Explore the feature

Put it into practice

Choose your appearance, font, and surface colors.
Keep text, controls, and chart lines easy to distinguish.
Save and check vehicle results and the quote form.

Open Remapdb Read the guide

Follow at your own pace

Video transcript

Jump to a chapter or read the walkthrough step by step.

0:00 Match the widget to your website

This Apex website uses mint surfaces, violet accents, rounded cards and soft shadows. Let's bring the widget into that same style, from vehicle search and tuning results through to the quote form.

0:19 Choose a theme and font

Branding starts with light, dark or automatic appearance. Dark gives the widget a different foundation; this website suits Light. The primary font keeps the controls and vehicle information consistent with the rest of the site. We'll use Lato.

0:39 Backgrounds: connect the surfaces

Customize colors and sizes brings the design controls together. In Backgrounds, a pale mint connects the search area to the website. A slightly deeper shade separates the tuning details while keeping the whole widget cohesive.

0:55 Buttons: make actions recognizable

Buttons carry the website's violet accent. The main action and Request a quote now belong to the same visual family. Keeping strong contrast makes both actions easy to recognize and read.

1:08 Texts: keep information readable

Texts controls the information hierarchy. Deep green section titles echo the website's headings, while the regular text stays dark and readable. Brand color should support the information, rather than compete with it.

1:22 Forms: connect the quote experience

Forms brings the same palette into customer inputs. A muted green border connects these fields to the design, while darker labels remain clear. The quote form should feel like a natural continuation of the vehicle results.

1:37 Badges: quieter supporting details

Badges organize technical details into small, scannable labels. A soft mint background keeps them connected to the theme without giving them the same visual weight as the main actions.

1:49 Dyno chart: distinguish the curves

The dyno chart has its own color controls. Violet tuning curves connect it to the brand, while the original curves remain distinct. Customers can compare the reference figures without losing the chart's visual hierarchy.

2:03 Dropdowns: style open menus

Dropdowns controls the menus that open inside the widget. A light mint surface carries the theme into the unit selector. Keep selected and hovered options distinguishable, so the design remains comfortable to use.

2:17 Sizes: shape and density

Sizes adjusts the overall density and shape. Medium controls leave more breathing room, and rounded corners echo the website's cards. The preview shows how these choices work together before we save.

2:30 Save the complete design

Save applies the complete color and size setup to the widget. These controls stay available for later refinements, and reset options can return individual values or groups to their defaults.

2:42 Custom CSS and branding controls

On a plan that includes branding removal, the copyright notice can be switched off. Custom CSS adds details beyond the color controls. Here, a small shadow gives the tuning card more depth. Paste CSS without style tags, then save the adjustment.

3:01 The saved design on the website

Refreshing the website brings the saved design into the customer experience. Mint surfaces, violet actions, readable headings and rounded controls now follow the surrounding page. The tuning details and chart retain their own clear hierarchy.

3:18 A consistent quote form

Request a quote continues the same design into the enquiry form. The labels, inputs and action colors work together with the vehicle summary. Customers can explore the tuning information and contact your team within one consistent experience.

3:34 Styling help when you need it

For a particular font or more involved styling, use Help me with styling to contact Remapdb. Available branding features and assistance depend on your plan. Start with a clear palette, then refine the details that matter to your website.

Your next step

Put the walkthrough into practice

Start with the free widget, or compare plans for your website and application.

Start free See pricing