BUILDER

Resources

Home

Forum

Github

Login

Signup

This page was made in Builder!

Dynamic landing pages with Builder

One of Builder's most powerful use cases is allowing non-developers to quickly create and publish landing pages within your site without needing developers involved to hardcode and manage this content.

Below we assume you have a component model called "page". If you are unfamiliar with models and how to create them, see our quick start guide to creating models.

Quick Setup

The simplest way to add custom landing pages to your site is to choose a path that your pages will live under. In the example below we will use the path /page/* to represent dynamic builder landing pages for our site.

<!-- Using your choice of routing, for all routes that don't match, render between your header and footer: -->

<builder-component name="page">
  Loading...
</builder-component>

<script>
  document
    .querySelector('builder-component')
    .addEventListener('load', (data) => {
      if (!data) {
        location.href = '/404';
      } else {
        // Page loaded succesfully
      }
    });
</script>

Creating and targeting pages

For previewing to work properly, make sure your page model has it's preview URL (in it's model settings) matching the routing rules your created. For instance, if you put your landing page component under /page/*, set your page model's preview url to something like your-site.com/page/test-page.

Additionally, you will want to ensure that whatever page you use for editing does *not* redirect to a 404 page, since we need it to load in the Builder editor even if no content currently exists at that URL.

Now from the /content page you can create a new landing page entry (choose "create entry" in the top right and then choose "landing page").

Next, you'll want to to target this page to a URL. At the top of the page, choose the crosshair icon, and in the popover choose "+ target" and on the left side choose "url path" and on the right side enter the url path you want this page to show on, e.g. "/page/my-new-landing-page"

Based on your subscription plan, you may not see targeting. If they are not present for you, try going to the "options" tab on the left and find the option for choosing a URL for your page

Advanced Setup

With the Content API you can query your pages ahead of time, for use cases like server side 404 handling or for being able to have landing pages without a particular path prefix (e.g. pages that live at your path root, like /my-landing-page without needing /page/ before it)

In this example, we will use express middleware with node.js, but this same strategy can be done with any language and framework

Also note that we hardcode one route to always include the builder code snippet or component. This way we can set this to be your preview URL for your landing page model and then Builder will open this URL every time you create a new landing page for editing and previewing on your site. For on-site editing and previewing Builder just needs to know one page that will always have the component on it that you are editing.

// It is best to hardcode one internal route that always has the builder component
// for use in the editor. The url path can be whatever you want, just be sure you
// set the "preview URL" in your model settings to match it
app.get('/builder-editing', (request, response) => {
  response.render(/* Page with Builder js snippet or React component */);
});

// We include this middleware after our router to only run this code
// if none of our hardcoded routes match first
app.use((request, response, next) => {
   // If nothing matches, we use the content API to see if we have a page matching this url
   const apiUrl = 'https://builder.io/api/v2/content/page' 
      + '?apiKey=' + BUILDER_API_KEY
      + '&userAttributes.urlPath=' + request.path
      // For a faster response, we omit the "blocks" field which contains all of the page rendering data
      + '&omit=data.blocks'; 

   axios.get(apiUrl)
    .then(function (response) {
      if (response.data.results.length) {
         // There is a matching builder page for this URL so we render a page with the Builder code snippet
         response.render(/* Your content with Builder snippet */);
      } else {
         // Both our code and Builder have no matching pages for this URL, so we 404
         response.redirect('/404');
      }
    })
});

Questions or comments?

Give us a chat, we respond quickly and are here to help!

CHAT US NOW

Was this article helpful?