How to Integrate Builder.io With Your Existing Website or App

Modern businesses need flexibility in how they manage and update their digital experiences. Builder.io offers a powerful visual content management system (CMS) that integrates seamlessly with existing websites and applications no full rebuild required. Whether you’re running a legacy platform, a headless setup, or a hybrid architecture, integrating Builder.io enables marketers and developers to collaborate efficiently while maintaining control over the tech stack.

Why Integrate Builder.io With an Existing Platform?

Builder.io bridges the gap between development and content teams by providing a no-code visual editor that plugs into your live environment. Here’s why it’s a strategic choice:

• No Replatforming Needed: Avoid costly and time-consuming migrations by adding Builder.io as a layer on top of your current setup.

• Visual Editing for Non-Technical Teams: Marketers can update content, A/B test layouts, and publish changes without developer intervention.

• Headless Flexibility: Works with any frontend framework (React, Vue, Angular, etc.) or traditional CMS.

• API-First Approach: Content is delivered via APIs, making it easy to reuse across multiple channels.

Key Integration Methods

Depending on your tech stack and use case, Builder.io offers multiple integration approaches.

1. Using the Builder.io SDK

The Builder.io JavaScript SDK is the most common way to embed the platform into an existing application. Here’s a basic example for a React app:

import { builder, BuilderComponent } from '@builder.io/react';

// Initialize Builder.io with your API key
builder.init('YOUR_API_KEY');

function Page() {
  return <BuilderComponent model="page" />;
}

This renders a page from Builder.io within your React component. The SDK automatically fetches and hydrates content, making it fully interactive.

2. iframe Embed for Legacy Systems

For older systems where JavaScript integration isn’t feasible, Builder.io provides an iframe-based embed option:

<iframe 
  src="https://builder.io/content/YOUR_PAGE_ID" 
  width="100%" 
  height="100%">
</iframe>

While less flexible than the SDK, this method works with virtually any platform, including WordPress, Shopify, or custom PHP applications.

3. API-Driven Content Fetching

For full control, you can fetch Builder.io content via its REST or GraphQL API and render it manually:

fetch('https://cdn.builder.io/api/v1/content/page?apiKey=YOUR_API_KEY&url=/current-path')
  .then(res => res.json())
  .then(data => {
    // Render content using your own logic
  });

Step-by-Step Integration Guide

1. Set Up Your Builder.io Account

• Sign up for a Builder.io account and create a new organization.

• Navigate to the API Keys section and copy your public API key.

2. Install the SDK

Add the appropriate Builder.io SDK to your project:

• For npm/yarn: npm install @builder.io/react

• For CDN: <script src="https://cdn.builder.io/js/webcomponents"></script>

3. Configure Content Models

In Builder.io, define content models that match your existing page structures. For example:

• Create a "page" model for full-page layouts

• Add "banner" or "promo" components for partial updates

4. Implement Preview Mode

Enable in-context editing by setting up preview URLs in Builder.io that match your development and production environments.

5. Deploy and Test

Gradually roll out Builder.io sections while monitoring performance and functionality.

Advanced Integration Strategies

1. Personalization and A/B Testing

Builder.io built-in targeting rules allow you to:

• Show different content based on user segments

• Run visual A/B tests without code changes

• Schedule content changes in advance

2. Hybrid Content Approach

Combine static and dynamic content by using Builder.io for specific sections while keeping other parts of your site in your existing CMS. For example:

• Static product pages in Shopify + dynamic marketing banners from Builder.io

• Core navigation in WordPress + promotional content in Builder.io

Common Challenges and Solutions

Challenge: Styling conflicts between Builder.io and existing CSS
Solution: Use scoped CSS or CSS-in-JS for Builder components

Challenge: Performance impact from additional JavaScript
Solution: Implement lazy loading for Builder.io components

Challenge: Authentication for preview mode
Solution: Set up secure preview URLs with token authentication