Embedding model onto a website

[bensinclair]

I’m using Builder.io for the first time and trying to embed a page model onto a HTML document.

I copied the JS code and am compiling it to ES5 using Babel and Webpack.

import { builder } from '@builder.io/sdk'

builder.init('xxxxxxxx')

builder.get('page').promise().then(content => {
  // Add the HTML to the element needed, wrapping with our webcomponent library
  // to fill in any needed interactivity (e.g. lazy loaded images, interactive tabs, etc)
  document.querySelector('#my-page').innerHTML = `
    <builder-component model="page">\${content.data.html}</builder-component>
    <script async src="https://cdn.builder.io/js/webcomponents"></script>
  `
});

It seems to be compiling and embedding the code on the page but it’s not replacing the “${content.data.html}” with the Builder.io content.

Am I missing a step?

[aziz]

@bensinclair

    <builder-component model="page">\${content.data.html}</builder-component>
    <script async src="https://cdn.builder.io/js/webcomponents"></script>

I see that you’re escaping the $ here which is needed for interpolating the content.data.html, I’d remove the \ before it and try again

On a side note, you don’t really need to fetch the page explicitly here if you’re on the browser, the sdk will auto detect the url path and fetch the corresponding page accordingly, something like this should suffice

document.querySelector('#my-page').innerHTML =  `<builder-component model="page" api-key="YOUR_KEY">
</builder-component>
<script async src="https://cdn.builder.io/js/webcomponents"></script>`

[bensinclair]

Interesting! The escaped $ was part of the code sample.

[bensinclair]

Removing it seems to stop it from working completely.

[bensinclair]

I tried your other suggestion which seems to almost work but it’s adding a class that says that there isn’t any content.

[bensinclair]

This is the model. Maybe I am misunderstanding something here?

Any ideas?

(sorry for multiple replies… for some reason this forum only allows one embedded media item for new users…)

[maddy]

Hi Ben,

No content means that there is no published content at that specific URL. Can you publish a page at the URL you are testing on?