Home App Docs Blog Github

Add a Builder component across pages, e.g. a site-wide ribbon

You can use a component model to test a single Builder component across pages, e.g. a site-wide ribbon

To do this, let’s create a new component model

Go over to builder.io/models, select “+ create model” and choose “component”

Then give your component a name, e.g. “ribbon”

Then, let’s give this an editing URL. This is what Builder.io will open in the Visual Editor to edit your ribbon, so this just needs to be any URL this Builder component will display on. In our case, since this component will be site-wide, we can just enter our homepage URL (e.g. https://our-site.com)

Note - when first integrating the code you may want to make the editing URL a local one, like http://localhost:8080. That way you can add the component to your local site and test out the full flow

Then, add a BuilderComponent to the top of your site. E.g. if using Builder with React

import { BuilderComponent } from '@builder.io/react'

export const Header = () => <>
  <BuilderComponent model="ribbon" />
  {/* The rest of your header */}

And that’s it!

Now you can go over to builder.io/content and choose “+ new entry” and choose “ribbon”

Then, you should see your site in the preview with a big “+ add block” at the top - drag and drop content in and publish!

Note that when using component models, just like any other content, you can use targeting & scheduling and A/B tests to dictate who sees what content for your ribbon

If you run into any issues or have any questions - don’t hesitate to ask here in the forum!