# Use URL parameter to specify file to be embedded on page

**URL:** <https://forum.builder.io/t/use-url-parameter-to-specify-file-to-be-embedded-on-page/6828>\
**Category:** CMS\
**Tags:** visual-editor\
**Created:** [November 26, 2024, 10:16pm UTC](https://forum.builder.io/t/use-url-parameter-to-specify-file-to-be-embedded-on-page/6828 "2024-11-26T22:16:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![StoutYeoman](https://avatars.discourse-cdn.com/v4/letter/s/f14d63/32.png) [@StoutYeoman](https://forum.builder.io/u/StoutYeoman)\
**Post date:** [November 26, 2024, 10:16pm UTC](https://forum.builder.io/t/use-url-parameter-to-specify-file-to-be-embedded-on-page/6828/1 "2024-11-26T22:16:55Z")

</div>

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](http://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!

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [December 16, 2024, 2:48pm UTC](https://forum.builder.io/t/use-url-parameter-to-specify-file-to-be-embedded-on-page/6828/2 "2024-12-16T14:48:20Z")

</div>

Hello @StoutYeoman,

Welcome to the [builder.io](http://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](https://www.builder.io/c/docs/models-data) and JavaScript. Here’s a streamlined approach:

1. **Create a [Data Model](https://www.builder.io/c/docs/models-data)**:

2. **Add Content Entries** :

3. **Pass ID in the URL** :

4. **JavaScript to Retrieve URL Parameter** :

5. **Query the Data Model** :

6. **Set the iframe src Dynamically** :

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

```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](https://www.builder.io/c/docs/models-data) and using a dynamic querying approach, you can efficiently manage multiple PDF links and streamline the user experience.

Thanks,

---

<div class="post-metadata">

**Author:** ![MichaelAbernathy](https://avatars.discourse-cdn.com/v4/letter/m/eb8c5e/32.png) [@MichaelAbernathy](https://forum.builder.io/u/MichaelAbernathy)\
**Post date:** [February 14, 2025, 10:16am UTC](https://forum.builder.io/t/use-url-parameter-to-specify-file-to-be-embedded-on-page/6828/3 "2025-02-14T10:16:13Z")

</div>

Thank you so mcuh for the help.