Using the Embed Tool or Custom Code Widget For iFrames

The Embed Tool can be used to add iFrames into any text area within your RealtyNinja website. Embedding an iFrame is how most third-party widgets can be displayed on your RealtyNinja website.

Contents

• Using the Embed Tool
• Troubleshooting iFrames
• More on iFrames
  • Third-Party Widgets
  • Responsive Embed
• FAQs

Using the Embed Tool

There are two options for embedding iFrame codes. You may find that one option displays your iFrame slightly differently than the other. Instructions for each are below under OPTION 1: Regular Embed and OPTION 2: Custom Code Widget

1. Log into your RealtyNinja website to find the Embed Tool at www.YOURWEBSITE.com/LOGIN

2. Click EDIT MY WEBSITE.

3. Navigate to the page you would like to add the embedded iFrame to via the website's navigation OR the MANAGE PAGES button.

OPTION 1: Any Content Area Embed

4 . Click EDIT THIS PAGE

5. Scroll the content widget and click into the editable area.

6. In the toolbar, click the EMBED TOOL icon.

7. Paste your iFrame code into the lightbox. Click EMBED THIS.

8. Click APPLY CHANGES and SAVE CHANGES.

If your iFrame isn't displaying how you'd hoped, don't panic! iFrames are finicky creatures, but the Ninjas are here to help. First, check our troubleshooting tips.

OPTION 2: Custom Code Widget

1. Click PAGE LAYOUTS & WIDGETS.

2. Drag and drop the CUSTOM CODE widget from the list on the left to the right, in the order where you would like to display the iFrame.

3. Click the settings cog ⚙️ on the CUSTOM CODE widget to open the settings window.

4. Paste the iFrame code into the Custom Code area.

📌 Pro-tip: Make your embed code responsive by using a tool like embedresponsively.com. Click here for steps.

5. Click APPLY CHANGES and SAVE CHANGES.

If your iFrame isn't displaying how you'd hoped, don't panic! iFrames are finicky creatures, but the Ninjas are here to help. First, check our troubleshooting tips.

Troubleshooting iFrames

If you're having trouble with an iFrame not displaying or displaying incorrectly check the following items first, then be in touch with our Support Ninjas if the problem persists.

1. Does your source URL start with "https://" rather than "http://"?
2. Does the source work? You can copy the URL and paste it into your browser to check. If it shows an error page, the source does not work and you will need to contact that provider to see why or get an updated link.
3. Is there a height and width set? Even if you have a width="100%", you will need a height as well or it won't know how tall it should be.
4. Not displaying properly on mobile or tablet? Convert the standard code to a responsive code with this simple tool and guide: How to Embed Responsively.
5. Does your iFrame also come with something above it that says "jquery" near the end it in a <script> tag? If yes, and your iFrame is not working, remove the <script> but keep your iFrame. This commonly causes conflicts and basically tells the iFrame "Hey wait, something's not right - don't show yet". Not all iFrames come with a script, and not all scripts are jQuery. RealtyNinja websites already run the script jQuery so when the browser is told to run it again, it gets confused.

More on iFrames

Third-Party Widgets

If you are looking to add a third-party service to your website you'll likely use an embedded iFrame to display the widget. Popular services are:

• Juicer (social media feeds)
• Videos (Youtube)
• Google Drive, PDF embeds
• RankMyAgent/RealSatisfied (testimonial services)
• REBGV stats
• Google maps

Responsive Embed

Use a site like embedresponsively.com to make your iFrames responsive where possible. Here is how:

1. Go to http://embedresponsively.com/
2. Select the source of your embed code (if you're not sure select Generic iFrame)
3. Click EMBED
4. Scroll to the bottom of the preview
5. Copy the new code
6. In your RealtyNinja website, use this code in place of your original code and SAVE CHANGES

FAQs

What is an iFrame?

Stands for "inline frame" - like a window within your website that allows you to show another website or service right from your own page. It lets you use and display special information from a software or company.

What is the anatomy of an iFrame? What are the parts?

An iFrame is made up of several pieces that make the [widget] a complete picture. It is comprised of:

• The iFrame tag <iframe>
• Title (helps screen readers) title="What's in the iFrame?"
• The source src="https://drive.google.com/...."
• Height value height="400"
• Width value width="600"

Why aren't iFrames responsive?

iFrames are not responsive, because mobile devices and many different sizes of screens did not exist at the time that iFrames were invented. They must have a width and height set in order for it to show the information, or it will essentially act like "closed window", not knowing how big of a space is needed to show the information inside it. Designers have since been able to use certain methods to force responsive widths, but the height value usually stays the same.The size will depend on the type of content you're displaying - if you're showing a video a small size can be width="600" height="400". If you're showing a PDF that's letter sized, try width="500" height="650".

Can the width be set to 100%?

style="width:100%"