The following article describes configuration settings for working with iFrames and Vinyl. Depending on how you implement the iFrame, you may wish to optionally leverage the iFrame Resizer widget to automatically adjust sizing of the iFrame to the corresponding content. Configuration information for the iFrame Resizer widget is described in this article.

Display a Vinyl Page on a Website with iFrame¶

This article provides an overview of how you can display a Vinyl Page from an App on a website. This is accomplished by using an <iframe> HTML tag on the website, which is used to embed another document within the current HTML document. In this scenario, the iframe tag is used to display the Vinyl application content.

Domain Name Requirements¶

In order for a Vinyl application page to display on a website via an iFrame, there are Domain Name requirements that must be met to allow the iFrame to render and display the Vinyl application content. Namely, the Vinyl application and the client website should share the same top level Domain.

For example: The website running on www.example.com and a Vinyl application running on prod.example.com would work well together, and allow an iFrame to display Vinyl application content on the website.

In order to achieve this requirement, the recommended path is to rename the Vinyl server to align with the main website domain. With this configuration, Vinyl would now run on vinyl.{{customer}}.com vs. {{customer}}.zudy.host.

HTML iFrame Code Examples¶

You'll need to add HTML iFrame code snippet to the website in the region where you're looking to display the Vinyl page. Examples of this code are as follows:

Example 1¶

<iframe style="border: 0;" src="{{url}}" width="100%" frameborder="0"></iframe>

In this example you would substitute the url value, depending on your configuration. This example uses inline styling to provide control over the content being displayed withinin the iFrame region.

Example 2¶

<iframe class="JobsFormiFrame" src="https://example.zudy.com/app/CovidTesting" width="100%" scrolling="yes"></iframe>

In this example you would subsitute the src value depending on your configuration. In addition, CSS is used to stylize the Vinyl page being displayed to match information on your website. Here, the iFrame has the class "JobsFormiFrame" assigned to it which allows all styles written for that class to apply to the content rendered within the iFrame.

iFrame Resizer Configuration¶

iFrame resizing adds more complexity to your pages and is only necessary if the following is true:

1. The iFrame appears in the middle of a page and you want the area of the webpage below to be visible if the area used by Vinyl is small
2. The pages that Vinyl renders differ significantly and you want the iFrame to resize as the Vinyl page changes size

If you are using the iFrame Resizer widget, this generally requires two components be configured for use with a Vinyl app:

1. The outside page hosting Vinyl in an iFrame
2. Inside the iFrame where Vinyl is running. This step is covered by the documentation in the Display a Vinyl Page on a Website with an iFrame section content.

Configuration for the Outside Page¶

The outside web page that hosts Vinyl in an iFrame needs to be configured to allow the iFrame Resizer widget to work properly. Follow the guidance provided in the Getting Started section of the iFrame Resizer Github library. Here you want to review and implement the normal configuration from the Typical Setup section of the documentation.

In the <script> tag portion of the syntax provided in the Getting Started guide, you may need to adjust this information slightly from the example provided to make it work for your implementation.

Example syntax for typical setup of iFrame Resizer widget

For example, you might adjust the syntax as follows depending on your particular setup:

iFrameResize( { log:true, heightCalculationMethod: 'lowestElement' , resizeFrom: 'child' } , '#myIframe');

Configuration in the Vinyl App¶

Inside the Vinyl app, you will install the iFrame Resizer widget and configure it as a site widget.

We recommend that the application serving pages in the iFrame has Vertical Scrolling enabled from App Mobile Settings.

How to Enable Vertical Scrolling¶

1. Navigate to the App Workbench
2. From App Settings, click More > Edge Case
3. Click the Mobile Settings button
4. Select Vertical Scrolling

Troubleshooting Issues¶

HTTP response headers¶

If you are having issues with an iFrame not displaying content, check to see if the website is using HTTP response headers which could conflict with what an iFrame is attempting to do. If using HTTP response headers, you may need a System Administrator (or someone with web server access and permissions) to modify the header record information on the web server in order to allow the iFrame to function as intended.

An example HTTP response header that may cause a conflict is Content-Security-Policy. The Content-Security-Policy HTTP response header is designed to reduce XSS risks on modern browsers by declaring which dynamic resources are allowed to load. This header can cause a conflict with the embedded iFrame, by not allowing the iFrame to load and display content.

Here is an example HTTP response header record illustrating the modification made to allow the iFrame to load content as desired. In this example, the Value for Content-Security-Policy has been updated to include frame-ancestors https://*.Website-DomainName.com, where you will use the appropriate value for your website Domain Name:

Example HTTP response header record modification

Check Network Connection Error¶

In order to iFrame a Vinyl page on an application that is not on the same domain as the Vinyl application, you must be on the same Vinyl version or higher. If you see a Check Network Connection error message when trying to run Vinyl in an iFrame, as a workaround you can enable the Allow Cross Origin option on the site. To do so, navigate to the Vinyl IDE > Security Providers > More > Sites, open the Site record to modify, check to enable Allow Cross Origin and click Save.