Please note that this article simply contains instructions on how to embed SnapStats onto your website.  
SnapStats is a third-party vendor that is not affiliated with myRealPage. Please keep in mind that your usage of SnapStats is governed by its rules, terms, and conditions. In case of issues regarding your SnapStats subscription, please contact SnapStats directly.

 


The task will be divided into two parts. Both parts must be completed:



• Generating and customizing your SnapStats Report embed code •


1 - Getting your SnapStats embed code:

  • A. Please consult directly with SnapStats on how to get your SnapStats report embed code. It should look similar to this:


2 - Modifying the embed code:

  • A. Take the SnapStats embed code, and modify it as shown below:


3 - Optimizing your code:

  • A. Go to EmbedResponsively.com
  • B. Click on the Generic iFrame tab.
  • C. Remove whatever text might be in the text field provided, and paste in your modified embed code from the previous step.
  • D. Click on the Embed button.


4 - Generated Code:

  • A. Scroll down until you locate the text box labeled "Embed code:" this will contain the codes you will be using. Take note of where the </style> tag ends (highlighted in yellow in the screenshot below) and the <div class> tag begins (highlighted in green). Once you've done so, press place your cursor in between the two tags and press the Return ↵ key on your keyboard to separate the two sections of code.
  • B. Your code should now look similar to the example provided here. 
  • Keep this window/tab open as we will return to it later.




• Adding your new responsive SnapStats Report to an existing web page on your myRealPage website •


1 - Log in to Private Office:

  • A. Open a new window/tab and enter the URL private-office.myrealpage.com
  • B. Enter your username (the email address you used when signing up).
  • C. Enter your password (which you chose during the sign-up process).
  • D. Click Login.



2 - From the Dashboard:

  • A. Click the Website tab.
  • B. Click All Web Pages.



3 - From the Web Pages list:

  • A. Locate the page you want to add  the RSS feed to. (Click here if you need to create a new, blank web page)
  • B. Click on Page Editor.



4 - From the page editor:

  • A. Click on the blue +Add Content Here button.



5 - In the pop up:

  • A. Click on the I will add a widget code... button.



6 - In the HTML Code editor

  • A. Add a title for your report. In the text box labeled "HTML Code," type in 
        <h2>THE TITLE OF YOUR REPORT OR NAME OF PLACE IT IS FOR</h2>



7 - Adding Your Embed Code

  • A. Go back to the embed code you generated earlier, and copy the <div> section (the parts highlighted in green). Paste this in the HTML Code text box, right after your chart title.
  • B. Go back to the embed code you generated earlier, and copy the <style> section (the parts highlighted in yellow). Paste this in the Additional code to be placed in <head> section text box.



8 - Adjusting your style code

  • A. In the Additional code to be placed in <head> section text box, locate the text:
         padding-bottom: 56.25%;
  • B. Change "56.25%" to "136.25%"


9 - Finishing Up

  • A. Once you're done adjusting the code, click on the Save Weblet button.