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

**URL:** <https://forum.builder.io/t/add-a-builder-component-across-pages-e-g-a-site-wide-ribbon/159>\
**Category:** Technical Questions\
**Created:** [August 14, 2020, 4:39pm UTC](https://forum.builder.io/t/add-a-builder-component-across-pages-e-g-a-site-wide-ribbon/159 "2020-08-14T16:39:21Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![steve](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/steve/32/78_2.png) [@steve](https://forum.builder.io/u/steve)\
**Post date:** [August 14, 2020, 4:39pm UTC](https://forum.builder.io/t/add-a-builder-component-across-pages-e-g-a-site-wide-ribbon/159/1 "2020-08-14T16:39:21Z")

</div>

You can use a [component model](https://www.builder.io/c/docs/guides/getting-started-with-models) to test a single Builder component across pages, e.g. a site-wide ribbon

To do this, let’s create a new [component model](https://www.builder.io/c/docs/guides/getting-started-with-model)

Go over to [Builder.io: Visual Development Platform](http://builder.io/models), select “+ create model” and choose “component”

 ![Screen Shot 2020-08-14 at 9.23.28 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/216301fce12a86221590395245d425815d8ee3ec.jpeg)

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

 ![Screen Shot 2020-08-14 at 9.23.33 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/32c63208c47a7eb67a4f6ccb13d14798620e1526.jpeg)

Then, let’s give this an editing URL. This is what [Builder.io](http://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`)

 ![Screen Shot 2020-08-14 at 9.24.54 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/47a7a89a2de5604af34b1899e6095be323c286a4.jpeg)

> **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](https://github.com/builderio/builder)

```auto
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](http://builder.io/content) and choose “+ new entry” and choose “ribbon”

 ![Screen Shot 2020-08-14 at 9.34.39 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/3f77bcac2bed9ad8bb83752f56253916da4efa34.jpeg)

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

 ![Screen Shot 2020-08-14 at 9.38.51 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/0c41ccb042d86a51f0ab0c2105b9a10244b69392.jpeg)

Note that when using component models, just like any other content, you can use [targeting & scheduling](https://www.builder.io/c/docs/guides/targeting-and-scheduling) and [A/B tests](https://www.builder.io/c/docs/abtesting) 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!