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

Bugs
1

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 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, 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 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.

2

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 editor and put this URL (Template1Company) in the model preview to integrate the website with Builder, I get the error shown in the screenshot below.
Screenshot 2024-05-21 055420

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

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

5

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

6

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.

7

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.

8

I tried all but no solution found.