How to add links to PDFs

You may wish to add a link to a PDF so that when a user clicks on the link (or a specific element), they get redirected to a specific URL.

There are two ways you can add links to PDFs with PDF Potion:

The Bubble link element
Custom HTML

Known limitations with links

If you add the 'Open an external website' action to an element on your PDF page, this will not work in PDFs output by PDF Potion.
If you view PDFs created by PDF Potion with the native Chrome PDF viewer, links will always open in the same tab

The Bubble link element

You can add the standard Bubble link element to your PDF page and specify a URL in the 'Destination URL' field:

The user will be brought to the URL when they click on the link element.

Custom HTML

You can use the Bubble HTML element and some custom code to create elements that have a link embedded within them.

For example, in the Bubble app below there is an image element with a static image. It has fixed width and height of 100px:

You can add a HTML element to your app with the same dimensions as your image and use the following code:

<a href="https://cranfordtech.com" target="_blank">
  <img src="https://f6284c9fd8991dc1f354c3b0e5f4f7e9.cdn.bubble.io/f1712762336249x921020150777024400/cranford-tech-logo-mark-full-color-rgb-2000px-h-300ppi.png"
width="100px" 
height="100px">
</a>

You would need to:

Replace the href value (“https://cranfordtech.com”) with whatever URL you’re redirecting to
Replace the src value with the URL link to your image. Please note you’ll need to make sure this link starts with ‘https:’ (the dynamic image URL on the image element doesn’t include this by default)
Update the width and height values with the dimensions you want for your image

You can then replace the image element with this HTML element. When the user clicks on the HTML element (i.e. the image) in the generated PDF, they’ll be brought to the specified URL.

You can use this approach to embed links within groups too (you would create a custom 'div' using HTML). If you're not a traditional developer, you can usually generate pretty good results by using ChatGPT/Claude or another LLM.