How to embed my Studio 3-step form into my own website

Studio’s 3-step form can be embedded directly into your own website using an iframe.
This option is ideal for organizations that prefer to keep everything within their own website, without creating separate landing pages in Studio.

Note:

If you embed the form instead of using a full Studio donation page, the “Thank You” page redirection will not work. However, your donor will still see the success or confirmation message within the form itself.

Pre-requisite

Your website platform must allow you to insert <iframe> and <script> code.
The script is required to make the embedded form height adjust dynamically as donors move through the 3 steps.

Step 1 – Create a 3-Step Form and Page

Create a new 3-step donation form in Studio.
Create a new donation page and link your form to it.

For detailed instructions, see:

Step 2 – Keep Only the Form Section

To ensure your external website only shows the form (not the full Studio layout):

Open your Studio page in the editor.
Click the trash icon to delete all other blocks or elements you don’t want.
Click Save & Close to save your changes.

Step 3 – Add Script to Your Studio Page

This script allows your form to automatically send its height to the external website for proper resizing.

From your Studio dashboard, click the three dots (⋯) beside your page name.
Select Update Details.
In the No Script Code section, paste the following script:

<script>
(function() {
  function sendHeight() {
    const height = document.body.scrollHeight;
    window.parent.postMessage(
      { type: 'p2u:resize', height: height },
      '*'
    );
  }

  // Send initial height
  window.addEventListener('load', sendHeight);

  // Observe size changes as donor moves through steps
  const resizeObserver = new ResizeObserver(sendHeight);
  resizeObserver.observe(document.body);

  // Optional: also trigger after step changes or transitions
  document.addEventListener('p2u:stepChange', sendHeight);
})();
</script>

4. Click Submit to save.

Your Studio page is now ready to be embedded on your own website.

Step 4 – Add Embed Code to Your Website

In your own website’s HTML editor, add the following code where you want the form to appear.

Important:

Replace the URL in the src attribute with your own Studio page’s full URL (for example: https://carelink.payments2us.com/donation).

Replace the URL in the e.origin line with your Studio domain only, without any path at the end (for example: https://carelink.payments2us.com).

<!-- The iframe embed -->
<iframe
  id="p2u-form"
  src="https://carelink.payments2us.com/donation"
  scrolling="no"
  style="height:800px; border:0; overflow:hidden; width:100%;">
</iframe>

<script>
window.addEventListener('message', function(e) {
  if (e.origin !== 'https://carelink.payments2us.com') return;
  if (e.data && e.data.type === 'p2u:resize') {
    const iframe = document.getElementById('p2u-form');
    iframe.style.height = e.data.height + 'px';
  }
});
</script>

Step 5 – Test Your Embedded Form

Open your website page where the form is embedded.
Ensure the form loads correctly and resizes smoothly as you progress through each step.
Submit a test donation to confirm the confirmation message displays within the form.

Your Studio 3-step form should now work seamlessly inside your own website, maintaining all Studio functionality and Salesforce connectivity.

Need Help? Let's Find the
Answer Together!

Sorry, we didn't find any relevant articles for you.