Articles in this section

See more

Embedding an <iframe> in an Info Tier Feature

Pavlos Kaimakis
  • Updated
Follow

Overview

Embedding iframes into an Info-Tier Feature is a simple process and can enhance the content of your app. This article provides information on how to use the iframe tag to embed third-party links. 

Diagnosis

You wish to embed a third-party link in your app and you don't want to use the Website Feature.

You can use instead the <iframe> tag. An iframe (inline frame) is used to embed another document within the current HTML document.

Solution

Important: When embedding URLs,  try to use secure (HTTPS) sites. Else the iframe may not display. Creating an iframe using HTTP renders your site vulnerable to cross-site attacks and thus, using secure sites is always recommended. 

  1. Log in to the CMS.

2.Navigate to Create -> Build 

mceclip0.png

3. Browse to the feature you wish and locate the WYSIWYG Editor. (Here, we will edit the Info-1-Tier feature, but this process can be used on any of the features that have the WYSIWYG Editor)


037.png

4. Click on the Code View icon </>.

038.png

5. Add your iframe.

  • The most basic <iframe> code that can be used is as follows: 
<iframe src="https://www.websitename.com"></iframe>
  • This can be advanced into adding, for example, a YouTube video using the following code: 
<iframe width="560" height="315" src="https://www.youtube.com/embed/owsfdh4gxyc" frameborder="0" allowfullscreen></iframe>

6. Click the 'Save' button on the upper right-hand corner.

mceclip2.png

Important: If possible try to avoid embedding iframes, as it is not possible to control the third-party website restrictions and your iframe may not work as expected. For instance::

  • Sites that have insecure connections can be blocked from being iframed by the browser. Browsers like Chrome, Safari, Firefox, and others choose how to block these pages, and they even do it differently depending on the platform. (i.e. Safari on your laptop can act differently to Safari on your iPhone.)
  • Websites can block from being placed in an iframe using the X-Frame-Options or other detectable means. Websites such as Google.com, Facebook.com, Amazon.com and more block from being iframed. It is possible to check whether a website is not allowing the iframe by using a website such as free iframe checker

Back to top 

Testing

  1. Embedding the above code will render the following in the WYSIWYG Editor.

    039.png
  2. When viewed in the App Preview:

    040.png

Back to top 

Related Articles

Related articles

Comments

0 comments

Please sign in to leave a comment.