If you have an existing website other than your RSportz site and you want to display pages from your RSportz site on it, you can embed your RSportz pages seamlessly with an iframe. In this article, we'll go over how to embed RSportz pages on external sites. 


Preparation:


Before we begin, make sure you have imported JQuery into the head of your page. It is required to properly set everything up. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


After the line that imports JQuery, add the following line to import rsOrgView. It is very important that JQuery is loaded first as rsOrgView is dependent on it. 

<script src="https://rsportz.com/assets/rsOrgView-1.2.js" type="text/javascript"></script>


At the bottom of the page, add this init script. Replace "yourorg" with the subdomain your organization uses:

<script>
  $(function(){
    RsOrgView.init("yourorg-embed.rsportz.com", {
      ajaxLinking: true
    })
  });
</script>


Basic iframe Implementation:


The most basic implementation you can use for embedding RSportz pages is just a simple iframe. This is the minimal code necessary to get your page embedded, but there are a couple of things to know to make it better.


Start with a basic iframe with the source set to your organization URL and class rsov-content. If you put -embed after your subdomain, it will remove the header from the page for cleaner embedding. 


<div id="rsov-wrapper">
    <div class="progress-overlay" style="display: none;"></div>
    <iframe class="rsov-content" frameborder="0" height="0" scrolling="no" seamless="" width="100%" src="https://yourorg-embed.rsportz.com/"></iframe>
</div>



An example of a simple iframe implementation can be found here http://rsportz.com/developer/iframe-only.html. You can inspect the source code on the page to see how it is structured.


Adding a Menu:


Adding a menu can seem difficult, but we have provided a template for you to work with. The basic menu template is as follows:

    

<div class="rsov-header">

  <!-- RSportz iframe menu options -->
  <nav>
    <ul>
      <li>
        <a href="javascript:RsOrgView.openPage('/');">Home</a>
      </li>
      <li>
        <a href="javascript:RsOrgView.openPage('/competitions/');">Competition</a>
      </li>
      <li>
        <a href="javascript:RsOrgView.openPage('/divisions/register');">Registration</a>
      </li>
    </ul>
  </nav>
  <!-- menu options end -->

</div>


You may have already noticed that the links in this menu are javascript functions. These functions change the page being displayed in the iframe to match the path given to the function. 


For example, lets say I have a page called "Rules" that can be found at yourorg.rsportz.com/pages/rules. If I want the menu to direct to that page, I would add the following list item to the menu:

<li>
    <a href="javascript:RsOrgView.openPage('/pages/rules');">Rules</a>
</li>


An example of a working menu can be found here http://rsportz.com/developer/iframe-menu.html. You can inspect the source code on the page to see how it is structured.


Adding Account Navigation:


The final and most complete version of embedding RSportz includes account navigation. This lets the user log into RSportz while still on your website. The code for this is a bit more complicated, but it functions universally so you can just copy/paste it into your page with minimal changes. Paste this code inside the header above the Nav code. You'll see the text "Your Org Name" on line #7 and #29. Change this text to match your org name or anything you would like it to say and that's all.


<!-- RSportz iframe avatar account nav -->
<div class="user-info">
  <div class="placeholder"></div>
  <div class="logged-out" style="display: block;">
  <div class="heading-title">
    <div class="title">
    Your Org Name
    <span class="subtext">
    <a href="javascript:RsOrgView.openPage('/user/login');">[login]</a>
    </span>
    </div>
  </div>
  </div>
  <div class="logged-in" style="display: none;">
  <div class="avatar-frame">
    <div class="with-avatar">
    <a class="rsov-link user-profile" href="javascript:RsOrgView.openPage('/user/profile');">
    <img class="avatar">
    </a>
    </div>
    <div class="without-avatar">
    <a class="rsov-link user-account-edit" href="javascript:RsOrgView.openPage('/user/account/edit');">[Edit]</a>
    </div>
  </div>
  <div class="heading-title">
    <div class="rsov-dropdown">
    <a class="rsov-dropdown-toggle" data-toggle="rsov-dropdown" href="javascript: return false;">
      <div class="title">
      <span class="user-full-name">Your Org Name</span>
      <span class="caret"></span>
      </div>
    </a>
    <ul class="rsov-dropdown-menu">
      <li>
      <a class="rsov-link user-profile" href="javascript:RsOrgView.openPage('/user/profile');">My Profile</a>
      </li>
      <li>
      <a class="rsov-link user-dashboard" href="javascript:RsOrgView.openPage('/user/dashboard');">My Dashboard</a>
      </li>
      <li>
      <a class="rsov-link user-account-edit" href="javascript:RsOrgView.openPage('/user/account/edit');">Edit Account</a>
      </li>
      <li>
      <a href="javascript:RsOrgView.openPage('/user/logout');">Logout</a>
      </li>
    </ul>
    </div>
  </div>
  </div>
</div>
<!-- avatar account nav end -->


An example of account navigation can be found here http://rsportz.com/developer/iframe-menu.html. You can inspect the source code on the page to see how it is structured.


The Complete Code:


Below is the template for the completed form of embedding with page navigation and account navigation.

<html>
  <head>
    <title>RSportz Embedded Iframe Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://rsportz.com/assets/rsOrgView-1.2.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://yourorg-embed.rsportz.com/assets/rsOrgView-1.2.css">
    <link rel="stylesheet" href="https://yourorg-embed.rsportz.com/assets/rsOrgView/basic-header-1.2.css">
  </head>
  
  <body class="public" style="cursor: auto;">

    <!-- RSportz iframe container -->
    <div class="rsov-container" id="rsov-anchor">

      <!-- RSportz iframe header -->
      <div class="rsov-header">

        <!-- RSportz iframe avatar account nav -->
        <div class="user-info">
          <div class="placeholder"></div>
          <div class="logged-out" style="display: block;">
            <div class="heading-title">
              <div class="title">
                Your Org Name
                <span class="subtext">
                  <a href="javascript:RsOrgView.openPage('/user/login');">[login]</a>
                </span>
              </div>
            </div>
          </div>
          <div class="logged-in" style="display: none;">
            <div class="avatar-frame">
              <div class="with-avatar">
                <a class="rsov-link user-profile" href="javascript:RsOrgView.openPage('/user/profile');">
                  <img class="avatar">
                </a>
              </div>
              <div class="without-avatar">
                <a class="rsov-link user-account-edit" href="javascript:RsOrgView.openPage('/user/account/edit');">[Edit]</a>
              </div>
            </div>
            <div class="heading-title">
              <div class="rsov-dropdown">
                <a class="rsov-dropdown-toggle" data-toggle="rsov-dropdown" href="javascript: return false;">
                  <div class="title">
                    <span class="user-full-name">Your Org Name</span>
                    <span class="caret"></span>
                  </div>
                </a>
                <ul class="rsov-dropdown-menu">
                  <li>
                    <a class="rsov-link user-profile" href="javascript:RsOrgView.openPage('/user/profile');">My Profile</a>
                  </li>
                  <li>
                    <a class="rsov-link user-dashboard" href="javascript:RsOrgView.openPage('/user/dashboard');">My Dashboard</a>
                  </li>
                  <li>
                    <a class="rsov-link user-account-edit" href="javascript:RsOrgView.openPage('/user/account/edit');">Edit Account</a>
                  </li>
                  <li>
                    <a href="javascript:RsOrgView.openPage('/user/logout');">Logout</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- avatar account nav end -->

        <!-- RSportz iframe menu options -->
        <nav>
          <ul>
            <li>
              <a href="javascript:RsOrgView.openPage('/');">Home</a>
            </li>
            <li>
              <a href="javascript:RsOrgView.openPage('/competitions/');">Competition</a>
            </li>
            <li>
              <a href="javascript:RsOrgView.openPage('/divisions/register');">Registration</a>
            </li>
          </ul>
        </nav>
        <!-- menu options end -->

      </div>
      <!-- header end -->

      <hr class="separator">

      <div id="rsov-wrapper">
        <div class="progress-overlay" style="display: none;"></div>
        <iframe class="rsov-content" frameborder="0" height="0" scrolling="no" seamless="" width="100%" src="https://yourorg-embed.rsportz.com/"></iframe>
      </div>
    </div>
    <!-- container end -->

    <script>
    $(function(){
      RsOrgView.init("yourorg-embed.rsportz.com", {
        ajaxLinking: true
      })
    });
    </script>

  </body>
</html>



Bonus Information:


Parameters in the init function can change the behavior of the iframe.  Here’s a list of some and how to use them: 


ajaxLinking: 
Takes true or false (without quotes).  True causes any links outside the iframe that act to change the page in the iframe page, to act through the iframe and produce a smoother experience for the user.  It is advised to use this setting.

defaultPage: 
Takes a path to a page in the RSportz web app and initially directs the iframe to this page.  For instance, if you want the iframe to open to the registration page you could use ‘divisions/register’.  The paths should be public paths that do not require logged in users. 

autoWidth: 
Takes true or false (without quotes).  Indicates whether the iframe will attempt to detect the width of its container in your website and adjust its width to fill the container.  This setting may cause unexpected behavior in some embeddings and favorable behavior in others.



*In order for redirect links to work -- such as those in emails sent during the registration process -- your RSportz account manager will also need to know the URL you've chosen on your own website to house the RSportz embedded iframe.  The format should look like: ‘http://website-domain/path/of/page/with/embedding?rsPage=’.