Watch Webinar: Figma - Design to Code in 80% Less Time

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Talk to Us
Contact Sales
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

When you're working on Pages, Sections, or Data previewing your content with working targeting and custom fields can help 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 blog post model with a slug custom field that you’re rendering on blog/[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/

To get the most out of this document, you should be familiar with:

  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 the 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 URLs.
  6. Click the X icon to close and click Save on the model.

Tip: 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.

The video below demonstrates these steps on a blog post Section model.

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

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

The example code in the video 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 Post Section model.
  • If the content isn't live, the URL uses a default path, here blog/__builder_editing__. Your path can be different than the example.

Be sure to replace https://your-site.com/your-directory/ with your site and directory. In the video example, the blog is hosted on Vercel, but your URL will be different.

// 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__`

For an example app, see Builder's Next.js CMS Blog example on GitHub. To use the example with Builder as in the video:

  1. Integrate the example app with Builder by adding your Public API Key to the .env file.
  2. Create a Post section model with at least one required custom field called slug of type Text.
  3. Run the app and use http://localhost:3000/ as your site in the code snippet.

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.

Tip: 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.

To use a Dynamic Preview URL, you must have already set up the logic on the model to use your site's live URL and the path you want. Use your Dynamic Preview URL by:

  1. Create a content entry with the model that uses the Dynamic Preview URL.
  2. In the Visual Editor, add or edit content if desired.
  3. Click the eyeball icon in the upper right and select View Current Draft.

When the browser loads your content, the URL should include your URL and path.

The video below shows creating and previewing a blog post using the example Post Section model with a Dynamic Preview URL from the previous section in this document.

When writing your own custom logic to determine a Page, Section, or Data model preview URL, Builder offers helpful objects and properties:

ObjectExampleDescription

content

const slug = content.data.slug ,

content.data.title

a JSON representation of the current state of content

space

space.publicKey

the current space settings

targeting

targeting.urlPath

An object representing the targeting set on content. If a targeting attribute is an enum this value is an array of strings; for example, locale or device.

fetch()

const settings = await fetch()

Use for running async code. For more information on fetch(), see the MDN documentation.

contentModel

contentModel.isLive

The current content model, such as the Page or Section model you're working with.

previewDevice

const isMobile = previewDevice === 'mobile'

The device choice in the editor, it will be either mobile, tablet, or desktop

The contentModel object includes several important properties:

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

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

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 model that is for cart modal upsells:

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

Example 4: Returning URLs specific to locale

This example creates URLs for localized Pages:

const locale = targeting.locale?.[0] || 'en'
return `https://your-site.com/${locale}${targeting.urlPath}`

You can use targeting and custom fields along with Dynamic Preview URLs to significantly enhance the development experience. For more information, see:

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy