Using Advanced Editing URL Logic to set up dynamic preview URLs

Often times users want to create a single template page with dynamic URLs based on some variable, such as a blog name, article slug, or locale.

With the Advanced Editing URL Logic feature, it is now possible to configure your preview URL within Builder to account for these variables, rendering Builder content as closely as possible to your exact site experience.

To start, go to Builder.io: Drag and drop page builder and CMS Advanced Settings > Editor and toggle on Advanced Editing URL Logic

Once that is on, navigate to the model page for any model where you want to use this feature. On the far right of the preview URL field, you should now see a Custom Code button

Clicking that, you will open a code window where you can enter your dynamic URL and pull in a number of different variables from the page content, Builder space and targeting.

Now, if you navigate to a piece of content for that model, and populate the corresponding fields, you should see the preview URL update to reflect those changes.

Pro tip: this code window will run code like any other JS window, so you can run fetch requests, use console.logs for debugging, etc to help you set up your preview URL as needed.

Check it out! And as always, let us know if you have any questions!

2 Likes