Preview URL's

Editing and Previewing Your Site

When you've integrated your nuxt app with Builder, you can edit and preview your site using a preview URL. Setting a preview URL gives you a way to develop and preview your site in the browser,

Preview URLs work with all models

You can set a preview URL on a Page, Section, or Data model. Using a preview URL on any model gives you a way to render content and data to preview Pages, Sections, or Data while you're working.

Setting a persistent URL on a model

You can set the preview URL on the model so that all content using that model is automatically configured with the preview URL.

When your site is ready to go live, change the URL on the model to your staging or prodution URL

1. go to apptab of builder.io and select Models
2. On selecting the Page inside the model we'll get page Model Options
3. inside Page Model Options select the Preview URl field and insert your Preview URl for example - http://localhost:3000
4. Press save and then you can Review your models/pages/sections in localhost:3000

Important: If you change the preview URL of a model from, for example, a live URL that is in production to localhost, any content using that model will no longer be live and all parts of your app using that model will be affected.

If you need to set the URL on the model, you must be certain that no published content is using that model.

Setting a temporary preview URl

If you are working on a page that is currently on production but you would like to develop it further: we can set a temporary Preview url, let's see how to do that

1. go to your Page that you would like to develop further.
2. Below the mainTab of your Builder.io on top-right corner you can see the existing URl.
3. Now change it to your desired preview url
4. Congrats!! you can Preview your Page on that URL now

setting a temporary preview URl host in Developer options

When you need to test out new changes or components in your local code across multiple content entries or models, it can be handy to override preview URl host (e.g. from your production host, like your-site.com, to your localhost) for the duration of your session.

this can save you from entering a temporary URL repeatedly as you move across content models or entries, when you want to be connected to your localhost throughout.

To set a preview URl temporarily for just your session, without affecting other teammates, use the Developer options as follows:

1. In the visual editor, press cmd + ctrl +a to open the Developer options. You must have Admin or Developer permissions to open the Developer Options. You must have Admin or Developer permissions to open this Dialogue.
2. In the Override preview URl host field, enter the preview URL you'd like to use.
3. Click the X to close the dialogue.

this setting takes effect for the duration of your session, or until you remove it.

setting the URL in Developer Options only affects the user who changes this setting, not the other developers, teammates, or site visitors.

when working static sites in our case nuxt, There is some additional Configuration we might need to do to get our preview URL to render preview.

By Default, When creating a page and editing it in Builder, the editor and preview loads the URL for that page. for example, if you create a new page at /mypage but your static site has no such page, you could get a 404.

There are two things we can do in this Scenario:

• Adding the Builder component to your 404 page
• Toggling off this behavior of previewing and editing on the specific URL for a page

1. Adding Builder component to your 404 page on your 404 page in your code base, add ```` as in the following code
2. Turning off preview for a specific URL

To turn off the default behavior of previewing and editing on the specific URL for a page, do the following.

1. GO to Account Setting > Advanced Settings > Advanced
2. Toggle Reload Preview on URL path change to the off position.

Crating Dynamic Preview URLs

You can add logic to page and section models to dynamically create the preview URl. for example, you can use a snippet like the below to preview blog posts:

// Check to see if the content is live. If so,
// use your site's URL followed by the 
// dynamic path you specify.
if(contentModel.isLive) {
    return `https://your-site.com/your-directory/${content.data.slug}`
}
// If the site's not live, use a placeholder URL
return `https://your-site.com/your-directory/__builder_editing__`

More About Dynamic Preview URL:

When you're working on Pages, Sections, or Data previewing your content with working targeting and custom fields can hel you understand exactly how your work will render when you publish .

By default, Builder adds your targeted URL path to the model preview url you define, but there are cases where you need more to calculate the preview URL, such as:

• Using locale codes as top routes, or even different domains per locale
• Serving a different site- or top level domain - for mobile or desktop
• section models that are rendered by a custom field; for example, a trending Products model with a slg custom field that you're rendering on products/slug
• Previewing live content on your live site and providing a fallback preview on a path , such as your-site.com/blog/_
• using custom fields or targeting for specific subpaths; for example /footwear

Example: Setting up a Dynamic Preview URL on a Product trending model

1. Go to Models
2. Open the Page, section, or Data Model you'd like to add a Dynamic Preview URL to.
3. Add a slug custom field with a type of Text.
4. Click on the code icon , < >, to the right of Preview URL field. This opens a code editor with comments giving more context on this feature
5. Add your custom code for determining your dynamic URL's
6. Click the X icon to close and click Save on the model

The Dynamic Preview URLs feature is on by default; however, if the code icon, < >, isn't available on the model in the Preview URL field, check that it is on. Go to Settings > Advanced Settings > Editor. Make sure Advanced Preview URL Logic is toggled to the on position.

How the example model and code work together

The Trending Section model in this example has a required slug field so that when a user creates a product post using Trending model, Builder prompts them to provide a slug

The code then uses slug to create the URL if isLive is true.

The example code below does two things:

• if the content is live, the example code returns a URL that Builder can use to create the Dynamic Preview URL. The first part, you create by providing your site's URL. The second , dynamic part pulls the slug from the example's Trending Section model.
• if the content isn't live, the URL uses a default path, here products/__builder_editing__ your path can be different than the example

// check to see if the content is live. if so,
// use your site's URL followed by the 
// dynamic path you specify.

if(contentModel.isLive){
    return `https://your-site.com/your-directory/${content.data.slug}`
}
return `https://your-site.com/your-directory/__builder_editing__`

The Dynamic Preview URLs feature is on by default; however, if the code icon, < >, isn't available on the model in the Preview URL field, check that it is on. Go to Settings > Advanced Settings > Editor. Make sure Advanced Preview URL Logic is toggled to the on position.

Preview your work with a Dynamic Preview URL

To use a Dynamic Preview URL, you must have already done the above steps. Setting up a Dynamic Preview URL on a Product trending model

1. Open the content and go to page in which we added the slug field and code for dynamic URL
2. now, on the right side on the field entry a Slug field is available
3. on adding the slug field your URL will automatically will get updated with the slug field

see the DynamicURl in slug field below

Available objects and properties

When Writing your own custom logic to determine a page, section, or Data model preview URL, Builder offers helpful objects and properties:

The contentModel object includes several important properties:

• isLive:true : When the content is currently live on production and not scheduled for future or prior date.
• startDate : start date of scheduled publish, if scheduled
• endDate : end date of scheduled publish, if scheduled

Usage example

Make sure that your Dynamic Preview URL Logic returns a string. Each of the following examples returns a string while using different dynamic featurea.

Example 1: Returning Blog URLs A blog might use a check to determine if your content is live and generate a URL that uses your slug or else use a fallback URL for editing based on that condition. Note that slug would be a custom field you add to the model, as in setting up a Dynamic Preview URL on a model

if (contentModel.isLive) {
  return `https://your-site.com/blog/${content.data.slug}`
}
return `https://your-site.com/blog/_`

Example 2: Determining category

This example uses a category hero model that you can target at a specific category or all categories:

return `https://your-site.com/category/${targeting.category || 'womens'}`;

Example 3: Cart modal upsell This returns a URL for a Section modal that is for cart modal upsells:

return `https://your-site.com/product/${targeting.product || '25752218M'}?addToCart=true`;