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
-
Log in to the CMS.
2.Navigate to Create -> Build
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)
4. Click on the Code View icon </>
.
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.
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
Testing
-
Embedding the above code will render the following in the WYSIWYG Editor.
- When viewed in the App Preview:
Comments
0 comments
Please sign in to leave a comment.