Skip to main content
All CollectionsWebsiteContent Management
How to Embed PDF and Image Files
How to Embed PDF and Image Files
Cam Langsford avatar
Written by Cam Langsford
Updated over 7 months ago

As part of your coaching platform you can upload files that you can share with your clients, or publicly.

These files can be downloaded but PDF and image files can also be embedded in any webpage, either on your Training Tilt site or in any other website.

Uploading Files

First go to Content - Files

You can upload a new PDF or image file.

You can control whether the file is available publicly or just for clients

You can also control which members can access the file

Getting Embeddable Link

Once your image or PDF is uploaded you can copy the "Embeddable Link" from the list of files.

Embedding in a Web Page

Now you have a link to embed you need this following html template ready to go to paste into your web page code. Replace the placeholder with your embeddable link to the file from earlier.

PDF

<embed src="YOUR_EMBEDDABLE_LINK_GOES_HERE" width="100%" height="1000px" type="application/pdf">

Image

For png images

<embed src="YOUR_EMBEDDABLE_LINK_GOES_HERE" width="100%" height="500px" type="image/png">

For Jpg or Jpeg Images

<embed src="YOUR_EMBEDDABLE_LINK_GOES_HERE" width="100%" height="500px" type="image/jpeg">

Notes: setting width to 100% will ensure the embed always covers the full width of the container you place it in on a page. The height you can play around with depending on the file or the page you place it on. A scroll bar will appear for multi page PDF's based on your height setting. 1000px is a good range to start with and will be around the same height as a single page of a PDF. For images start with 500px, this will vary depending on the image size.

Now if you want to embed it on one of your Training Tilt pages, either public or private pages follow these steps. If on a public page, make sure you have set the file itself to be available publicly.

Go go the page you want to edit and click "Edit Content" and use the "Page Builder"

No inside the page builder, drag across any template section from the template list onto the page where you want to embed the file.

Select the template and click the edit code button.

Now replace the code with your embed code from the previous step.

Click OK and wait for the embed to load and it should look something like this.

Now save the page and you are done.

If you need to embed it on a web page that is not part of Training Tilt, the process is similar but you need to follow the guide of the website platform based on how they allow you to embed html code. Reach out if you need help!

Did this answer your question?