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: Visual Development Platform, 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: Visual Development Platform 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!