Download PDF & Save PDF Link

The Ion platform allows you to add a button to your interactive experiences that allow visitors to download a page within the experience.

This functionality is especially useful for experiences that generate results from a quiz, assessment, etc., as it allows the visitor to retain that information after leaving the site. To take it a step further, you can also save a link to that PDF in an Ion data field so you can include it in email templates sent from Ion, so visitors can download it later.

Download PDF

You'll first add a button to your page as you normally would. For more information on how to add a button to an ion page, click here.

When setting the action for your button, click the Download Page as PDF tab and select the page you would like to download from that button.

Save PDF Link

To take it a step further, you might want to email the PDF to your respondents. This can be done by saving a link to the PDF to an Ion data field. That data field can then be referenced within Ion email templates (and elsewhere) to give respondents another place to download that file.

For example purposes, let's say you have a short form on your Results page for respondents to have their results emailed to them. In this scenario, you would add the "Save PDF link" rule to the submit button along with a rule to send your email template to the respondent.

*NOTE: It's important to note that if you are using this for dynamic results, you will need to make sure the link is saved after those results are generated by the respondent.

In the example above, the Save PDF link rule action is set up to save the Results to the PDFLink data field and then send our email template.

To complete the setup, you'll want to add a link to your email template that prompts respondents to download the PDF. This can be set up using some simple HTML in your email template that would look like the below.

<a href="{{PDFLink}}">Download Results</a>

For more information on working with email templates, click here.

Print PDF in the Large viewport:

If you want to make the PDF print in the large viewport - and this is not automatically happening - here are two options:

- You can manually rearrange elements in SM and XS using Row settings to look the same as LG.

- Or you can add the Script below to your Libraries (Dashboard > Libraries > Scripts) and then apply it to the Body of the Page:

SCRIPT:

<style>
@media print {
.ixp-grid-col-sm-1, .ixp-grid-col-sm-2, .ixp-grid-col-sm-3, .ixp-grid-col-sm-4, .ixp-grid-col-sm-5, .ixp-grid-col-sm-6, .ixp-grid-col-sm-7, .ixp-grid-col-sm-8, .ixp-grid-col-sm-9, .ixp-grid-col-sm-10, .ixp-grid-col-sm-11, .ixp-grid-col-sm-12,
.ixp-grid-col-md-1, .ixp-grid-col-md-2, .ixp-grid-col-md-3, .ixp-grid-col-md-4, .ixp-grid-col-md-5, .ixp-grid-col-md-6, .ixp-grid-col-md-7, .ixp-grid-col-md-8, .ixp-grid-col-md-9, .ixp-grid-col-md-10, .ixp-grid-col-md-11, .ixp-grid-col-md-12,
.ixp-grid-col-lg-1, .ixp-grid-col-lg-2, .ixp-grid-col-lg-3, .ixp-grid-col-lg-4, .ixp-grid-col-lg-5, .ixp-grid-col-lg-6, .ixp-grid-col-lg-7, .ixp-grid-col-lg-8, .ixp-grid-col-lg-9, .ixp-grid-col-lg-10, .ixp-grid-col-lg-11, .ixp-grid-col-lg-12 {
float: left;
}
.ixp-grid-col-md-12,
.ixp-grid-col-lg-12 {
width: 100%;
}
.ixp-grid-col-md-11,
.ixp-grid-col-lg-11 {
width: 91.66666667%;
}
.ixp-grid-col-md-10,
.ixp-grid-col-lg-10 {
width: 83.33333333%;
}
.ixp-grid-col-md-9,
.ixp-grid-col-lg-9 {
width: 75%;
}
.ixp-grid-col-md-8,
.ixp-grid-col-lg-8 {
width: 66.66666667%;
}
.ixp-grid-col-md-7,
.ixp-grid-col-lg-7 {
width: 58.33333333%;
}
.ixp-grid-col-md-6,
.ixp-grid-col-lg-6 {
width: 50%;
}
.ixp-grid-col-md-5,
.ixp-grid-col-lg-5 {
width: 41.66666667%;
}
.ixp-grid-col-md-4,
.ixp-grid-col-lg-4 {
width: 33.33333333%;
}
.ixp-grid-col-md-3,
.ixp-grid-col-lg-3 {
width: 25%;
}
.ixp-grid-col-md-2,
.ixp-grid-col-lg-2 {
width: 16.66666667%;
}
.ixp-grid-col-md-1,
.ixp-grid-col-lg-1 {
width: 8.33333333%;
}
.ixp-grid-col-md-pull-12,
.ixp-grid-col-lg-pull-12 {
right: 100%;
}
.ixp-grid-col-md-pull-11,
.ixp-grid-col-lg-pull-11 {
right: 91.66666667%;
}
.ixp-grid-col-md-pull-10,
.ixp-grid-col-lg-pull-10 {
right: 83.33333333%;
}
.ixp-grid-col-md-pull-9,
.ixp-grid-col-lg-pull-9 {
right: 75%;
}
.ixp-grid-col-md-pull-8,
.ixp-grid-col-lg-pull-8 {
right: 66.66666667%;
}
.ixp-grid-col-md-pull-7,
.ixp-grid-col-lg-pull-7 {
right: 58.33333333%;
}
.ixp-grid-col-md-pull-6,
.ixp-grid-col-lg-pull-6 {
right: 50%;
}
.ixp-grid-col-md-pull-5,
.ixp-grid-col-lg-pull-5 {
right: 41.66666667%;
}
.ixp-grid-col-md-pull-4,
.ixp-grid-col-lg-pull-4 {
right: 33.33333333%;
}
.ixp-grid-col-md-pull-3,
.ixp-grid-col-lg-pull-3 {
right: 25%;
}
.ixp-grid-col-md-pull-2,
.ixp-grid-col-lg-pull-2 {
right: 16.66666667%;
}
.ixp-grid-col-md-pull-1,
.ixp-grid-col-lg-pull-1 {
right: 8.33333333%;
}
.ixp-grid-col-md-pull-0,
.ixp-grid-col-lg-pull-0 {
right: auto;
}
.ixp-grid-col-md-push-12,
.ixp-grid-col-lg-push-12 {
left: 100%;
}
.ixp-grid-col-md-push-11,
.ixp-grid-col-lg-push-11 {
left: 91.66666667%;
}
.ixp-grid-col-md-push-10,
.ixp-grid-col-lg-push-10 {
left: 83.33333333%;
}
.ixp-grid-col-md-push-9,
.ixp-grid-col-lg-push-9 {
left: 75%;
}
.ixp-grid-col-md-push-8,
.ixp-grid-col-lg-push-8 {
left: 66.66666667%;
}
.ixp-grid-col-md-push-7,
.ixp-grid-col-lg-push-7 {
left: 58.33333333%;
}
.ixp-grid-col-md-push-6,
.ixp-grid-col-lg-push-6 {
left: 50%;
}
.ixp-grid-col-md-push-5,
.ixp-grid-col-lg-push-5 {
left: 41.66666667%;
}
.ixp-grid-col-md-push-4,
.ixp-grid-col-lg-push-4 {
left: 33.33333333%;
}
.ixp-grid-col-md-push-3,
.ixp-grid-col-lg-push-3 {
left: 25%;
}
.ixp-grid-col-md-push-2,
.ixp-grid-col-lg-push-2 {
left: 16.66666667%;
}
.ixp-grid-col-md-push-1,
.ixp-grid-col-lg-push-1 {
left: 8.33333333%;
}
.ixp-grid-col-md-push-0,
.ixp-grid-col-lg-push-0 {
left: auto;
}
.ixp-grid-col-md-offset-12,
.ixp-grid-col-lg-offset-12 {
margin-left: 100%;
}
.ixp-grid-col-md-offset-11,
.ixp-grid-col-lg-offset-11 {
margin-left: 91.66666667%;
}
.ixp-grid-col-md-offset-10,
.ixp-grid-col-lg-offset-10 {
margin-left: 83.33333333%;
}
.ixp-grid-col-md-offset-9,
.ixp-grid-col-lg-offset-9 {
margin-left: 75%;
}
.ixp-grid-col-md-offset-8,
.ixp-grid-col-lg-offset-8 {
margin-left: 66.66666667%;
}
.ixp-grid-col-md-offset-7,
.ixp-grid-col-lg-offset-7 {
margin-left: 58.33333333%;
}
.ixp-grid-col-md-offset-6,
.ixp-grid-col-lg-offset-6 {
margin-left: 50%;
}
.ixp-grid-col-md-offset-5,
.ixp-grid-col-lg-offset-5 {
margin-left: 41.66666667%;
}
.ixp-grid-col-md-offset-4,
.ixp-grid-col-lg-offset-4 {
margin-left: 33.33333333%;
}
.ixp-grid-col-md-offset-3,
.ixp-grid-col-lg-offset-3 {
margin-left: 25%;
}
.ixp-grid-col-md-offset-2,
.ixp-grid-col-lg-offset-2 {
margin-left: 16.66666667%;
}
.ixp-grid-col-md-offset-1,
.ixp-grid-col-lg-offset-1 {
margin-left: 8.33333333%;
}
.ixp-grid-col-md-offset-0,
.ixp-grid-col-lg-offset-0 {
margin-left: 0%;
}
.visible-xs,
.visible-sm,
.visible-md {
display: none !important;
}
.hidden-xs,
.hidden-sm,
.hidden-md {
display: block !important;
}
table.hidden-xs,
table.hidden-sm,
table.hidden-md {
display: table;
}
tr.hidden-xs,
tr.hidden-sm,
tr.hidden-md {
display: table-row !important;
}
th.hidden-xs,
td.hidden-xs,
th.hidden-sm,
td.hidden-sm,
th.hidden-md,
td.hidden-md {
display: table-cell !important;
}
.hidden-xs.hidden-print,
.hidden-sm.hidden-print,
.hidden-md.hidden-print {
display: none !important;
}

table.visible-sm,
table.visible-md {
display: table;
}
tr.visible-sm,
tr.visible-md {
display: table-row !important;
}
th.visible-sm,
td.visible-sm,
th.visible-md,
td.visible-md {
display: table-cell !important;
}
}
</style>

If you have any questions, please contact us on help@rockcontent.com. 😀