Embeding API Element

[jupiter1]

Hello!

Hope you're well.

Kind of a novice question. I've a API embed with me and I want to add it to a landing page but I'm little consued as to how to actually implement it? Someone said to me just wrap it in an <iframe> and drop it on the page but this obviously kills the performance and it takes a while to load that element.

API looks like this --> domain.com/embed/benefits 

It's coming from a main website which is not on HubSpot. They prefer adding the API so they don't have to constatnly update the copy on two places.

Can anyone help?

[aircompanion10]

Certainly! If you want to embed an API on a landing page without affecting performance, using an is a common approach. However, you can enhance the loading speed and performance by incorporating asynchronous loading or lazy loading techniques.

[Jaycee_Lewis · Accepted solution]

Hi, @jupiter1 👋 Welcome to our community. Thanks for your question. 

It sounds like you're looking to integrate dynamic content from an external API into a HubSpot landing page. Embedding an API directly into a webpage, as you've described, isn't exactly how APIs are typically used. Instead, APIs are interfaces that allow your website or application to retrieve and display data programmatically from another service.

If you can't put the API endpoint in an iframe> because it might not work well (APIs don't return HTML by default, but instead JSON data formats), you need to consider other options:

• Serverless functions (HubSpot Enterprise)
  or
• Making AJAX Call from the Client Side (will require some testing to make sure you don't run into CORS issues)

Please let me know if you have any additional questions.  — Jaycee

[jupiter1]

Thank you for the reply, thankfully CORS isn't going to be an issue since it's on a same domain.

I digged around with the Fetch method and came up with this.

fetch("https://domain.com/embed/benefits")
  .then((response) => response.json()) // Parse the JSON response
  .then((data) => {
    const benefits = data.benefits;

    document.getElementById("benefits-section").innerHTML = `
      <h2>Benefits</h2>
      <ul>
        ${benefits.map((benefit) => `<li>${benefit}</li>`).join("")}
      </ul>
    `;
  })
  .catch((error) => console.error("Error fetching data:", error));

 So basically, I just use the "benefits-section" ID to render elements?