How to Implement the Source Code Feature
Overview
Apptekz provides a wide choice of features to display products, services, and activities. The Source Code feature is highly flexible and powerful feature that enables the use of custom code to build customized functionality or connect to external resources.
The Source Code feature is essentially a blank slate from which you can enter virtually any code you need from custom HTML, IFRAME, custom scripts, or even link to internal app features. If you need to include anything in your app that you can’t do with another feature or the Custom Page, this feature enables you to build it.
In the simple example below, we will show how to use the Source Code feature to embed a URL using IFRAME to make the link page appear as a page in the app.
Using IFRAME to present external websites is often preferred to using the Link or Links features when using external pages to provide app functionality such as Food Ordering, Booking, Real Estate Listing Search, and other services that have already been created elsewhere and don’t provide some other way to include in a mobile app to provide a seamless experience for app users and simplify data management for the business owner. Remember that any site used in IFRAME should be mobile optimized and should not block the use of IFRAME.
To use the Source Code feature to embed an IFRAME link, follow the steps below.
- Add the Source Code feature to your app.
- Replace the icon with one more suitable for the content presented by the Source Code feature
- Add the IFRAME code in the data entry portion of the feature
- Your page should appear in the phone emulator to the right.
- That’s it, your done!
Note: It’s important to make sure that you set the height and width parameters to allow the page to fit on on all size screens as seen in the example below. Using 100% rather than a specific pixel size should ensure that this page in your app will look good on any phone running the app, regardless of the screen size.
When using IFRAME, you may discover that the site doesn’t load as expected in the app. This is often the result of the site blocking the ability to use IFRAME to link to their site. Social media sites such as Google and Facebook are among the sites that simply won’t work in IFRAME. In cases like this, use our Link or Links features or links within other app features such as Custom Page, Contact, Places, etc.
To check any website for IFRAME restrictions that would prevent you from embedding the site in your app, test the site using a tool like the ones available at the links below:
https://iframetester.com
https://www.tinywebgallery.com/blog/advanced-iframe/free-iframe-checker
One final thing to consider when using IFRAME is to ensure that you have the right URL for the page or information you want to present. One way to ensure you have the correct link is to test in your browser or place in the link field of a feature within your app. If it appears as expected, you have the correct link. (All links must use https rather than http) — While this example shows how easy it is to use Source Code to present an external page through IFRAME, our IFRAME feature is the easiest method to present in IFRAME.
As we have demonstrated above, IFRAME is one of the simpler things you can do with the Source Code page. However, this feature offers the flexibility to create customized functionality to anyone with coding skills.
If you have any questions on how to use this feature in your app, please open a ticket and let us know how we can assist you.
