How to make embedded features match your website

You paste a contact form on flaviocopes.com. Submissions work. The form still looks like a different product.

Black text, white box, Inter. The rest of the page uses your font and your button color.

Sitebase Appearance reads the public homepage and restyles every embed on that site. Let’s see how to apply that without changing the snippet.

Sitebase is in private beta. Public signup isn’t open. These steps are for accounts with access.

Put a feature on the page first

Appearance restyles features that already exist on the website. Add a contact form if you do not have one yet.

The homepage also has to answer at the domain you stored in Sitebase. Analysis fetches https://flaviocopes.com. A site that only exists on your laptop gives it nothing to read.

Copy the snippet from the feature’s Setup tab and paste it where the form should appear:

<script
  async
  crossorigin="anonymous"
  src="https://sitebase.dev/embed.js"
  data-sitebase-widget="YOUR_CONTACT_KEY"
></script>

Replace YOUR_CONTACT_KEY with the key from the dashboard, or paste the complete snippet Sitebase gives you. In an Astro page, add is:inline so the script stays intact.

Notice that this tag never changes. The theme is stored on the website and baked into the published feature HTML.

Open Appearance

Open the website in Sitebase. Open Config in the sidebar. Scroll to the Appearance card.

The line under the heading names the domain: “Analyze flaviocopes.com to generate a theme that makes embedded features blend into the site.”

A new site shows Default Sitebase style and a Default badge. The preview uses Inter, black text, a white surface, and a black button.

Analyze the homepage

Click Analyze website. After the first successful run, that button reads Re-analyze website.

Wait for Analyzing flaviocopes.com… to finish. Sitebase fetches the homepage and the stylesheets linked from it. The request uses the user agent SitebaseThemeBot/0.1. If a firewall blocks unknown bots, allow that string so the fetch can complete.

A working run shows “Analysis complete. Review the preview, then apply the theme.”

If the fetch cannot reach the domain, the panel reports the failure. Check that the homepage is public, uses https://, and matches the domain on the site.

Nothing on the live embed changes yet. This is a draft.

Read the draft

The swatches are labeled Draft theme (not applied yet). Click a color to edit it.

You get Text, Muted, Background, Surface, Border, Accent, and On accent. Beside them, Sitebase shows the extracted font family and the corner radius in pixels. You edit the colors here. Font and radius stay as extracted unless you re-analyze.

The preview renders one of your features in the new look. If the site has no features yet, it uses a newsletter signup as the sample.

If the homepage ships dark-mode styles, a second row of swatches appears, plus Light and Dark tabs on the preview. Dark mode follows the site’s own switch when that is a class or attribute on html or body, like .dark. If there is no selector like that, it follows the visitor’s color scheme. A site with no dark-mode styles keeps a single palette.

Tweak a color if you need to

Click Accent. Pick a color, or type a hex value like #1a1a1a, then Save.

The notice is “Color saved to the draft. Review the preview, then apply the theme.”

A value that is not a color shows "…" is not a valid CSS color. Use a hex value like #1a1a1a.

Light and dark colors are separate rows. Edit the row you are looking at.

The published page still uses the previous look until you apply.

Apply the theme

Click Apply theme. That button only appears while the draft is different from what visitors see.

Sitebase republishes every feature on that website. The notice reports the count, like “Theme applied. 3 features republished with the new look.”

The badge switches to Themed. The snippet stays the same. The hosted embed URL under Setup stays the same too. Both pick up the new CSS because the published HTML changed.

The theme belongs to this website. Other sites in the account keep their own look.

The Branding card on the same Config page is a separate setting. The small “Powered by Sitebase” link is not part of the extracted theme.

Check the published page

Open the public URL in a fresh browser window.

Look at the form on the page, not only the dashboard preview. The font, the button, and the field borders should sit closer to the rest of flaviocopes.com.

Testimonials, a countdown, a cookie banner, and the other embeds on that site use the same theme. Open those pages too.

On a phone-sized screen, check that the button and fields still fit.

If the page still shows the default black-and-white look, confirm you clicked Apply theme. The dashboard preview can be ahead of the live page until that click.

After a redesign

When the site’s colors change, come back to Appearance and click Re-analyze website. Preview again. Apply again.

Reset to default removes the theme and republishes features in the standard Sitebase style.

For the rest of Config, see websites and appearance. If the form is not on the page yet, start with the contact form guide.