Use URL parameter to specify file to be embedded on page

Technical Questions CMS
1

Our site has several dozen “gated content” assets - basically just PDF files where the user must submit a simple form in order to view/download the PDF file.

These forms are managed/hosted in Salesforce, so we’re using the Custom Code component to embed them in the landing pages using an iframe. When the form is submitted, the user is redirected to a “Thank You” page.

I’m trying to create a single “Thank You” page and pass an ID in the URL to identify the PDF file associated with the form that was submitted.

My initial thought was to just pass the URL of the PDF file from the Builder.io Asset Library and use JavaScript to set that as the source of the iframe on the Thank You page.

Explicitly defining src="https://cdn.builder.io/o/assets%2Fce1ea832308e45d1a9079c87c4bdd80f%2Fcb509dc396be410e82ce1ebe27cebaba?alt=media&token=08532c4f-1f9d-4f88-b1d7-866634ee12b4&apiKey=ce1ea832308e45d1a9079c87c4bdd80f" of the iframe in a Custom Code component works.

But when I pass that same value as a URL parameter, e.g., website.com/thank-you?assetURL=https://cdn.builder.io/o/assets%2Fce1ea832308e45d1a9079c87c4bdd80f%2Fcb509dc396be410e82ce1ebe27cebaba?alt=media&token=08532c4f-1f9d-4f88-b1d7-866634ee12b4&apiKey=ce1ea832308e45d1a9079c87c4bdd80f I get the following error:

{“error”:{“code”:400,“message”:“Invalid HTTP method/URL pair.”}}

Is there a better way to go about this? From reading through the Knowledge Base and Forum, it seems like the recommendation might be to:

  1. Create a data model with ID and URL (or File?) fields
  2. Create a content entry for each of the PDF files
  3. Pass the ID to the Thank You page via URL
  4. Use JavaScript to retrieve the ID from the URL
  5. Bind a Custom Code to the data model created in #1 above
  6. Somehow query the data model to retrieve the URL associated with the ID passed to the page and set that URL as the src of the iframe.

I’m struggling to get this to work, so I’m wondering if I’m over-complicating things or if I’m on the right path but haven’t gotten all the pieces together yet.

Has anyone needed to solve for a similar use case? If so, how?

Thanks in advance!

2

Hello @StoutYeoman,

Welcome to the builder.io forum post.

To achieve your goal of dynamically setting the PDF file URL in an iframe on a “Thank You” page, you can follow these steps using Builder.io’s data models and JavaScript. Here’s a streamlined approach:

  1. Create a Data Model:

    • In Builder.io, create a new Data Model to store the mappings between the IDs and their corresponding PDF URLs.
    • Add a field for the ID (this could be a slug or unique identifier) and a URL field to store the PDF URL from the Builder.io Asset Library.

  2. Add Content Entries:

    • For each PDF file, create a content entry in Builder.io under this Data Model.
    • Make sure each entry has a unique ID and the correct PDF URL.

  3. Pass ID in the URL:

    • When redirecting users to the “Thank You” page, append the unique ID of the PDF as a query parameter. For example, the URL might look something like: website.com/thank-you?id=pdf-123.

  4. JavaScript to Retrieve URL Parameter:

    • On the “Thank You” page, use JavaScript to extract the ID from the URL. You can achieve this using the URLSearchParams API in JavaScript.

  5. Query the Data Model:

    • After fetching the ID from the URL, use the Builder.io API to query the Data Model and retrieve the corresponding PDF URL.
    • You can use the builder.get() method to query your specific Data Model for the URL associated with the retrieved ID.

  6. Set the iframe src Dynamically:

    • Once you have the URL from the Data Model, set the src attribute of your iframe using JavaScript.

Here is an example of how you could implement this using JavaScript:

import { useEffect, useState } from 'react';
import { builder } from '@builder.io/react';

// Initialize the Builder.io library with your API key
builder.init('YOUR_API_KEY');

function ThankYouPage() {
  const [pdfUrl, setPdfUrl] = useState('');

  useEffect(() => {
    // Extract the ID from the URL
    const urlParams = new URLSearchParams(window.location.search);
    const pdfId = urlParams.get('id');

    if (pdfId) {
      // Query the data model for the PDF URL associated with the ID
      builder.get('your-data-model-name', {
        query: {
          'data.id': pdfId,
        },
      }).then((response) => {
        const pdfEntry = response[0]; // Assuming one entry per ID
        if (pdfEntry) {
          setPdfUrl(pdfEntry.data.url); // Set the PDF URL
        }
      }).catch(error => {
        console.error('Error fetching PDF URL:', error);
      });
    }
  }, []);

  return (
    <div>
      <h1>Thank You!</h1>
      {pdfUrl ? (
        <iframe src={pdfUrl} width="100%" height="500"></iframe>
      ) : (
        <p>Loading your document...</p>
      )}
    </div>
  );
}

export default ThankYouPage;

By organizing your data in a Data Model and using a dynamic querying approach, you can efficiently manage multiple PDF links and streamline the user experience.

Thanks,