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.
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.
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.
When I use Next.js, I can use the original editor. Is there any solution for custom sites?
It’s been many days without a response to this issue. I am concerned about the responsiveness of the support forum.
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.
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.
I tried all but no solution found.
Hi I found a solution to this by accessing builder content through their content API: Content API - Builder.io
Here, you can choose plain JS to access the stuff you built in builder like so:
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:
<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:
Pretty dope.