# Integrating Builder.io with Custom HTML and CSS Websites Without Frameworks

**URL:** <https://forum.builder.io/t/integrating-builder-io-with-custom-html-and-css-websites-without-frameworks/5634>\
**Category:** Bugs\
**Created:** [May 21, 2024, 1:33pm UTC](https://forum.builder.io/t/integrating-builder-io-with-custom-html-and-css-websites-without-frameworks/5634 "2024-05-21T13:33:32Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![sajjadast786](https://avatars.discourse-cdn.com/v4/letter/s/8797f3/32.png) [@sajjadast786](https://forum.builder.io/u/sajjadast786)\
**Post date:** [May 21, 2024, 1:33pm UTC](https://forum.builder.io/t/integrating-builder-io-with-custom-html-and-css-websites-without-frameworks/5634/1 "2024-05-21T13:33:32Z")

</div>

I have a website that uses only HTML and CSS, not frameworks like React, Vue, or Next.js. I’m using an API to get content from [Builder.io](http://Builder.io) and display it on my site. Here’s the code I use:

javascript  
Copy code  
const getPage = async (model, pageURL, containerId, cacheSeconds = 0) =\> {  
const encodedPageURL = encodeURIComponent(pageURL);  
const url = `${endpoint}${model}?apiKey=${apiKey}&url=${encodedPageURL}&cacheSeconds=${cacheSeconds}`;

```
try {
    const response = await fetch(url);

    if (!response.ok) {
        throw new Error(`Failed to fetch content: ${response.statusText}`);
    }

    const data = await response.json();
    const contentDiv = document.getElementById(containerId);

    if (!contentDiv) {
        throw new Error(`Container element not found: ${containerId}`);
    }

    contentDiv.innerHTML = data.data.html;
} catch (error) {
    console.error('Error fetching content:', error.message);
}

```

};  
However, when I use [Builder.io](http://Builder.io), it tells me that I haven’t integrated Builder into my website, so I have to use the fallback editor. There should be a JavaScript SDK to integrate [Builder.io](http://Builder.io) into custom websites, like this:

html  
Copy code

 Your Custom Page

```
<!-- Include Builder.io SDK -->
<script src="https://cdn.builder.io/js/builder.js"></script>

<!-- Initialize Builder.io -->
<script>
    builder.init('YOUR_PUBLIC_API_KEY');
</script>

<!-- Add any other head content here (e.g., stylesheets, meta tags) -->

```

Is Builder.io launching something like this, or is there an SDK I can use? I need to integrate Builder.io into hundreds of sites for our company.

Regards.

---

<div class="post-metadata">

**Author:** ![sajjadast786](https://avatars.discourse-cdn.com/v4/letter/s/8797f3/32.png) [@sajjadast786](https://forum.builder.io/u/sajjadast786)\
**Post date:** [May 21, 2024, 2:25pm UTC](https://forum.builder.io/t/integrating-builder-io-with-custom-html-and-css-websites-without-frameworks/5634/2 "2024-05-21T14:25:18Z")

</div>

Well, when I run all the code below:

 Your Custom Page

```
<!-- Include Builder.io SDK -->
<script src="https://cdn.builder.io/js/builder.js"></script>

<!-- Initialize Builder.io -->
<script>
    builder.init(' *********************');
    getPage('page', "/contact", 'content-container');
</script>

```

And my URL is: https://template1.cumulusbetasites.com/test-case/contact.cfm

When I go to the [Builder.io](http://Builder.io) editor and put this URL ([Template1Company](https://template1.cumulusbetasites.com/test-case/contact.cfm)) in the model preview to integrate the website with Builder, I get the error shown in the screenshot below.  
 ![Screenshot 2024-05-21 055420](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/a7cebd8abdbf0169ff819ec44d438a3aeb0a0ab8.png)

So, I have to use the fallback editor, which is not a good option for my clients. You can see the fallback editor option in the screenshot below.  
 ![Screenshot 2024-05-21 055507](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/c/c4c08ab218c6753ec643a53ad7df778af2c47169.png)

When I use Next.js, I can use the original editor. Is there any solution for custom sites?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/3/3d341efcc76deaa26a0bd004295ebe954ab1446e.svg) [@system](https://forum.builder.io/u/system)\
**Post date:** [May 23, 2024, 3:30pm UTC](https://forum.builder.io/t/integrating-builder-io-with-custom-html-and-css-websites-without-frameworks/5634/3 "2024-05-23T15:30:02Z")

</div>



---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/3/3d341efcc76deaa26a0bd004295ebe954ab1446e.svg) [@system](https://forum.builder.io/u/system)\
**Post date:** [May 28, 2024, 1:40pm UTC](https://forum.builder.io/t/integrating-builder-io-with-custom-html-and-css-websites-without-frameworks/5634/4 "2024-05-28T13:40:44Z")

</div>



---

<div class="post-metadata">

**Author:** ![sajjadast786](https://avatars.discourse-cdn.com/v4/letter/s/8797f3/32.png) [@sajjadast786](https://forum.builder.io/u/sajjadast786)\
**Post date:** [May 28, 2024, 4:16pm UTC](https://forum.builder.io/t/integrating-builder-io-with-custom-html-and-css-websites-without-frameworks/5634/5 "2024-05-28T16:16:17Z")

</div>

It’s been many days without a response to this issue. I am concerned about the responsiveness of the support forum.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [June 3, 2024, 12:29pm UTC](https://forum.builder.io/t/integrating-builder-io-with-custom-html-and-css-websites-without-frameworks/5634/6 "2024-06-03T12:29:46Z")

</div>

Hello @sajjadast786,

Could you confirm the source you followed to integrate the custom HTML site?

I’m not sure if you should be using the Builder JS library and would like to understand the article that advises using this SDK.

For integrating a custom HTML site, we recommend using our Web Components API. This approach is more suited for custom HTML integrations.

> **[Web Components API - Builder.io](https://www.builder.io/c/docs/webcomponents-api)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.

> **[Builder.io HTML API - Builder.io](https://www.builder.io/c/docs/html-api)**
>
> Harness the power of server-side pre-rendering and seamless integration with any tech stack using the Builder HTML API.

---

<div class="post-metadata">

**Author:** ![sajjadast786](https://avatars.discourse-cdn.com/v4/letter/s/8797f3/32.png) [@sajjadast786](https://forum.builder.io/u/sajjadast786)\
**Post date:** [June 3, 2024, 4:40pm UTC](https://forum.builder.io/t/integrating-builder-io-with-custom-html-and-css-websites-without-frameworks/5634/7 "2024-06-03T16:40:48Z")

</div>

Yes, we want to integrate the builder on our site using HTML, but it appears there is no straightforward way to integrate the builder with custom sites using HTML. Could you please provide us with a suggestion? I’ve reviewed all your documentation but haven’t found a solution.

---

<div class="post-metadata">

**Author:** ![sajjadast786](https://avatars.discourse-cdn.com/v4/letter/s/8797f3/32.png) [@sajjadast786](https://forum.builder.io/u/sajjadast786)\
**Post date:** [June 26, 2024, 7:23am UTC](https://forum.builder.io/t/integrating-builder-io-with-custom-html-and-css-websites-without-frameworks/5634/8 "2024-06-26T07:23:32Z")

</div>

I tried all but no solution found.

---

<div class="post-metadata">

**Author:** ![pandus1s](https://avatars.discourse-cdn.com/v4/letter/p/f4b2a3/32.png) [@pandus1s](https://forum.builder.io/u/pandus1s)\
**Post date:** [September 20, 2024, 2:33pm UTC](https://forum.builder.io/t/integrating-builder-io-with-custom-html-and-css-websites-without-frameworks/5634/9 "2024-09-20T14:33:18Z")

</div>

Hi I found a solution to this by accessing builder content through their content API: [Content API - Builder.io](https://www.builder.io/c/docs/content-api)

Here, you can choose plain JS to access the stuff you built in builder like so:

```auto
https://cdn.builder.io/api/v3/content/my-model-name?apiKey=YOUR_API_KEY

```

This returns an object with the pre-rendered HTML. Place the HTML on your site like this:

```auto
<div id="builder-section"></div>

<script>
    fetch('https://cdn.builder.io/api/v3/html/(your-model-name)?url=(URL-Of-Your-Store)&apiKey=(YourAPIKey)&limit=1')
        .then(response => response.json()) 
        .then(data => {
            if (data && data.data && data.data.html) {
                document.getElementById('builder-section').innerHTML = data.data.html;
            } else {
                console.error('Didnt find any HTML.');
            }
        })
        .catch(error => console.error('Error while loading the HTML:', error));
</script>

```

Also, heading over to this site gives you the direct links to all your builder content to access via the api:

> **[Builder.io: Visual Development Platform](https://builder.io/api-explorer)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually..

Pretty dope.