1. Home
  2. SiteConnex™ Software
  3. Embed Website Content (Resource Navigator, Web Form or Calendar)

Embed Website Content (Resource Navigator, Web Form or Calendar)

An iframe (short for “inline frame”) is a nifty web technology that serves as a kind of window within an existing web page. Its main job is to allow you to bring content from a different online resource and place it inside of your own website. Here are four important reasons we choose to use iframes to show resources on SourceLink websites on third-party websites:

  1. Embed External Content: One of the primary purposes of an iframe is to embed content from one web page into another. This can be content like videos, maps, news feeds, or any other content that exists on a different web address. When you use an iframe, you’re essentially creating a space on your webpage where this external content can be displayed. This is great for allowing people to access and use The Resource Navigator without having to to directly to your main SourceLink website. It advances our no wrong door approach, and is helpful for entrepreneurs to be able to get connected to the right resource without additional clicking around.
  2. Building Blocks: You can think of iframes as building blocks for your webpage. You can load different parts independently within iframes, which makes it easier to manage and update. This technology will provide a sort of “sandbox” for the embedded content. In other words, the content within the iframe is isolated from the rest of the host web page. Styles, scripts, and code in the embedded content won’t interfere with the styles and functionality of the parent page. This isolation is essential for maintaining the integrity of the overall page, which is important as it can make something like the SourceLink Resource Navigator or SourceLink Calendar appear to be part of the host website brand. The other important aspect to realize as part of this is that any updates you make to the SourceLink software will be reflected immediately on any iframe embed you’ve placed.
  3. Data and Analytics: Another key benefit of using iframes is that you are able to see and count all the additional traffic, analytics, and data entered from entrepreneurs where SourceLink technologies have been iframed or embedded. Assuming you setup each Resource Navigator view with it’s own unique tracking code, and with a little Google Analytics know-how, you can easily track and report on how each iframe is doing.
  4. Secure Content Display: Iframes are often used to display sensitive content, such as payment forms or login widgets, from external sources. By using an iframe, you can ensure that this external content is displayed securely within another website, reducing the risk of security vulnerabilities.

In essence, iframe code is a tool for web developers to create a space within a webpage where they can display content from external sources while maintaining control, security, and separation from the main page’s elements.

When thinking about sharing the Resource Navigator or Calendar with another group, there are a few very important considerations and actions you must take.

Create a document that shows what is being shared, and where it can be found online by website address. Any embedded SourceLink resources will be your team’s responsibility to maintain. SourceLink staff cannot track where iframes have been displayed, particularly when staff change within your organization. Below is an visual to use as a reference example.

You may use the code below and update the DOMAINNAME with your own website.com URL to render the iframe. Alternatively, within the SourceLink plugin on SiteConnex, you can copy and paste the iframe section of each Resource Navigator Resource View or Resource Navigator Partner Profile Form.

Once you provide the code to the organization that wishes to place that SourceLink technology on their own website, they will need to instruct their web master or web developer to place that code on the page where it needs to show. Often there is a dedicated widget that can be used to display HTML and scripts.

Embedding Resource Navigator (Resource View)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://DOMAINNAME/wp-content/plugins/resource-navigator/inc/sourcelink/assets/js/libs/iframeResizer.min.js"></script>
<iframe src="https://DOMAINNAME/resource-navigator/embed/RESOURCEVIEWID/" width="100%" scrolling="no" allowfullscreen frameborder="0"></iframe>
<script type="text/javascript">iFrameResize();</script>

Embedding Resource Partner Signup (Partner Profile Form)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://DOMAINNAME/wp-content/plugins/resource-navigator/inc/sourcelink/assets/js/libs/iframeResizer.min.js"></script>
<iframe src="https://DOMAINNAME/resource-navigator/embed-profile/PROFILEID/" width="100%" scrolling="no" allowfullscreen frameborder="0"></iframe>
<script type="text/javascript">iFrameResize();</script>

Embedding Web Form

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://DOMAINNAME/wp-content/plugins/resource-navigator/inc/sourcelink/assets/js/libs/iframeResizer.min.js"></script>
<iframe src="https://DOMAINNAME/resource-navigator/embed-webform/WEBFORMID/" width="100%" scrolling="no" allowfullscreen frameborder="0"></iframe>
<script type="text/javascript">iFrameResize();</script>

Embedding Calendar

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://DOMAINNAME/wp-content/plugins/resource-navigator/inc/sourcelink/assets/js/libs/iframeResizer.min.js"></script>
<iframe src="https://DOMAINNAME/resource-navigator/embed-event/?view=month&tribe-bar=false" width="100%" scrolling="no" allowfullscreen frameborder="0"></iframe>
<script type="text/javascript">iFrameResize();</script>

To customize the embedded calendar options, you can modify the iframe url with the following parameters.

  • view
  • category
  • exclude-category
  • keyword
  • tag
  • exclude-tag
  • tax-operand
  • author
  • venue
  • organizer
  • months_events_per_day
  • events_per_page
  • tribe-bar

More information on calendar parameters >>

Updated on October 25, 2023
Was this article helpful?

Related Articles