When creating a Custom Page or Landing Page on your KW Agent/Team site, you have a ton of flexibility to build out the content with the ability to add iFrame or HMTL. Both of these options enable you to display content from an external source—such as a different webpage, video, or application—directly on your site.
- iFrame - enter the web address of the 3rd party page you want displayed on your site. When a change happens on the 3rd party page, that change will be reflected on your site.
- HTML - copy the source code from a 3rd party page, or a widget created for this purpose, and it will display on your site. That source code is static and won't update with future changes made to the 3rd party page.
Here are some popular iFrame or HTML use cases KW Agents are using on their KW Sites:
- Calendly - use a variety of embed options to generate HTML to embed on your site.
- Tidycal (HTML) - once you build out a Booking Page, copy HTML for either a specific Booking Type or entire Booking Page to embed on your site.
- Mortgage Calculator (HTML) - use the mortgagecalculator.org Widget Generator to set the calculator defaults you want to use, then copy the HTML and embed on your site.
- Public School Review (HTML) - at the bottom of their Public School API and Data Feed page, you can create and customize a free School Data Widget to embed on your site (the source code says "iFrame", but you will use the HTML option when adding to your site).
- Google Calendar Public Booking Page (iFrame/HTML) - when you create a Google Appointment Schedule, you can share the Public Booking Page and will see options to copy the URL to use with iFrame, or can generate HTML to embed on your site.
- Google Forms (iFrame/HTML) - when you go to share a Google form, you will see options to copy the URL of the public facing form to use with iFrame, or can generate HTML for the form to embed on your site.
- YouTube (HTML) - https://www.youtube.com/ - access the share options on the video you want to embed, and you will see an embed link to copy.
- Vimeo (HTML) - https://vimeo.com/ - access the share options on the video you want to embed, and you will see an embed link to copy.
- Zillow Profile (iFrame) - go to your Zillow profile, copy the URL (should be formatted similar to "https://www.zillow.com/profile/ppolansky"), and use that URL in the iFrame module.
- Ratemyagent.com (HTML) - generate HTML for their Review Widget which you can then embed on your site.
- Facebook Page (HTML) - use the Facebook Page Plugin tool to generate HTML for any public page on Facebook, which you can then embed on your site.
- Matterport (iFrame) - go to the virtual tour you want to add, copy the URL (should be formatted similar to "https://my.matterport.com/show/?m=jiG4p1iZRK5"), and use that URL in the iFrame module.
- Canva (HTML) - go to the design you want to use, copy the HTML, and embed on your site.
- Facebook Pixel (HTML) - set up your pixel, copy the pixel HTML, and embed on the page you want to track traffic for (you can only do this for an individual landing page or custom page - you can't add HTML to the homepage or any of the default pages).
- Mailchimp (HTML) - go to the design you want to use, export the HTML file, open in notepad/ copy the HTML, and embed on your site.
- Flipsnack (HTML) - go to the flipbook you want to use, copy the HTML, and embed on your site.
Add HTML to a Custom Page or Landing Page
1. Create and configure your Custom Page or Landing Page.
2. At the bottom left of the page, click + Add Module, then click Additional Modules and select HTML Embed.
3. If you want to add custom HTML, click in the Shared field and select Create New.
- This will have you give the HTML content an Internal Name and then you can paste the HTML in the space provided.
- Publish the HTML content, at the top right of the page, then you can select it in the module.
Add iFrame to a Custom Page or Landing Page
1. Create and configure your Custom Page or Landing Page.
2. At the bottom left of the page, click + Add Module, then click Additional Modules and select HTML Embed.
3. If you want to add custom a custom iFrame, click in the Shared field and select Create New.
- This will have you give the iFrame content an Internal Name and then you will paste the full URL of the page you want to iFrame, in the URL field.
- If you need to make adjustments to the sizing, you can use the iFrame Height and iFrame Width fields to do this.
- To adjust iFrame Height, enter the pixel height you want displayed.
- To adjust iFrame Width, enter the percentage of the container you want covered by the content (100% is the default).
- Publish the iFrame content, at the top right of the page, then you can select it in the module.