HTML and Qwik API - How to Get Required JS to Load?

Technical Questions
1

When loading via webcomponents/HTML API, the builder area is not pulling in the .js that it needs to activate the components interactive features, including in this case calling the API to get the data. Also happens with sliders, etc. I’ve seen this reported in other threads with no solution other than moving to a different tech stack, which doesn’t seem to make sense.

Builder content link

Builder public api key
8db31f7e69d24ba2afde0c21f78e9022

What are you trying to accomplish
e.g. I want to integrate builder on a landing page

Screenshots or video link
Live:

image
image1140×662 50.5 KB

Fallback Editor:
image
image1042×492 49.6 KB

Code stack you are integrating Builder with
HTML - not an SPA. No React, etc. Just want to pull this into the HTML with the HTML or Qwik API. Ideally will be able to call this server-side.

Here is the client-side code I’m testing with:

<script async src="https://cdn.builder.io/js/qwik/qwikloader.js"></script>
<div id="my-content"></div>
<script>
  (async () => {
    const qwikUrl = new URL('https://cdn.builder.io/api/v1/qwik/page');
    qwikUrl.searchParams.set('apiKey', '8db31f7e69d24ba2afde0c21f78e9022');
    qwikUrl.searchParams.set('userAttributes.urlPath', '/chase-sapphire-reserve-mlp-1');

    const response = await fetch(qwikUrl);
    const { html } = await response.json();
    document.querySelector('#my-content').innerHTML = html;
  })();
</script>

As you can see from the screenshot, the HTML is loading fine, but it’s not doing the data binding. On other attempts at this, I can’t get it to load the scripts to make the carousel work. I feel like I am missing a required script include, even though the Qwik docs say it will bring in any .js that it needs.

2

Hey Tim, thanks for reaching out! I believe we responded directly to you in email but wanted to close the loop here as well.

So the thing is when you inject JS scripts using .innerHTML it won’t run those scripst, as stated in this thread:

So I believe you might have to chance the approach and try to fetch on the server and return the result in the response if makes sense for you.

3

Thank you for the response, Gustavo! This is an interesting theory.

I tried calling the Qwik server side, and that had the same behavior.

What did work was changing the URL for the API that it was calling (which is hosted on my website) to go directly there and not through the builder.io proxy. The proxy is required to make it work in the editor without setting up CORS for that API, but that same proxy didn’t work from the HTML or Qwik API.

So now the API call portion works, but it still shows “missing component” for the carousel when I try and use that. And, I can’t edit anything with the URL set to the direct path, I have to set it back to the proxy path to edit, and then back to the direct path to actually see it.

<div data-missing-component="BuilderCarousel"></div>

1 Like
4

FWIW, I was able to get the desired behavior on the client-side by using the webcomponents API and using the Entry ID of the page instead of the URL like this:

<builder-component model="page" entry="{{ value.entry }}" api-key="{{ BUILDER_IO_PUBLIC_API_KEY }}"></builder-component>
<script async src="https://cdn.builder.io/js/webcomponents"></script>

That doesn’t help with my desire to get this working with server-side rendering from Python, but it does get all the necessary scripts to load.

It’s not entirely clear from the docs, but you can get the Entry ID to feed into this from the URL while editing a page.

5

@timlwhite thanks for the update ! And yes, content urls are Builder.io: Drag and drop Visual CMS so that would be the correct value to enter for entry ID as well