With dynamic Symbols, you can use any content entry to serve as a Symbol that changes dynamically depending on your needs. This expands how you can dynamically use content, adjusting for targeting, scheduling, or A/B testing to create a tailored and engaging user experience.
Though this document focuses on creating dynamic Symbols in the Builder web app, you must integrate Section building with your codebase to take full advantage of this feature.
Tip: the Integrating Sections document uses code snippets with a model called announcement-bar, which is the example used in this document. Because of this, the code in the Integrating Sections document complements the instructions in this document.
Any content entry within Builder.io can be a dynamic Symbol, not just those designated as Symbols.
This guide covers making a dynamic Symbol out of a minimal Section that serves as an announcement bar, but you could use any content entry in its place.
We recommend starting with a Section model for a dynamic Symbol. If you already have a model you want to use, you can skip to the next section.
To create the model:
- Go to Models.
- Click the + Create Model button.
- Choose Section for the type of model you're creating.
- Name your model and give it a description; for example, Announcement Bar with a description of Announcement bar for the tops of our pages.
- Click the Create button.
- For local development and previewing in your app, also consider specifying a Preview URL while in your model. For example, if you're developing on localhost, you could use
http://localhost:3000, where3000would be the port your app's running on. Default port numbers vary by framework, so be sure to check your terminal or framework documentation for the port.
For more info on models, visit Intro to Models. For more detail on Section models specifically, refer to Creating Section models, which includes a video of creating a Section model.
The video at the end of this document shows the entire process, starting with existing models and content entries and then using them with targeting to demonstrate the dynamic behavior of a Section used as a dynamic Symbol.
Next, create a content entry using your new model. If you already have one you want to use, you can skip this section.
- Go to Content.
- Click the + New Entry button.
- Select your new model, such as the example Announcement Bar from the previous section.
- Design your new section.
- When your design is ready, click the Publish button.
For more detailed instructions, including a video, visit Making an Announcement Bar.
The video at the end of this document shows the entire process, starting with existing models and content entries and then using them with targeting to demonstrate the dynamic behavior of a Section used as a dynamic Symbol.
After you've converted the section to a Symbol, you can apply targeting, scheduling, or A/B testing to the Symbol.
For detailed instructions, visit:
The video at the end of this document shows the entire process, starting with existing models and content entries and then using them with targeting to demonstrate the dynamic behavior of a Section used as a dynamic Symbol.
After following the instructions above, you can use your dynamic Symbol:
- Go to Content.
- Select or create a new content entry.
- In the content entry, such as a Page or another Section, go to the Insert tab, expand the Code section, and drag in a Symbol block, dropping it in the work area.
- Double-click the Symbol to open the Symbol dialogue.
- In the Models field, select the model you want to use. This example uses the previously created Announcement Bar, but you could use another model.
- Still in the Symbol dialogue, set the Dynamic toggle to the on position.
In this way, Builder can dynamically select the appropriate content entry based on criteria you defined in the the Symbol, such as targeting, A/B testing, or scheduling.
To fully use your dynamic Symbol with your app, you must integrate Section building as mentioned in the Prerequisites for this document. For detailed instructions, visit Integrating Sections.
