Here's the recommended way to display external Web pages within Channeltivity's navigation:


  1. Go to Settings > Portal Customization > Navigation & Custom Pages
  2. Click the "New" button and select "iFrame Page" 
  3. Enter a Title for your menu item
  4. Enter the URL of the external Web page you'd like to display
  5. Select permissions
  6. Hit "Save" and you're done!

Tip: This also works with our SAML single sign-on configuration, so you can seamlessly embed your external applications within Channeltivity.


Please note: Since Channeltivity uses SSL to secure your portal, any URL that you wish to IFrame must be a URL secured by SSL and begin with "https://...".



Best Practice: Seamless Embedding


To get rid of the scrollbar around the IFramed content, add the following JavaScript to the code of the page you're embedding. It will automatically adjust the height of the IFrame to fit the content:

 

<script src="//code.jquery.com/jquery-latest.js"></script>                            

<script>
    $(function () {
        var body = document.body;
        var html = document.documentElement;

        window.parent.postMessage({height: Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)}, "*");
    });
</script>

 


Scrolling the Channeltivity page


To control scrolling of the parent Channeltivity page, add the following JavaScript to the code of the page you're embedding. The parent page will scroll to the specified coordinates:


      

<script>
$(function () {
var body = document.body;
var html = document.documentElement;

window.parent.postMessage({ height: Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight) }, "*");
                
$("#button-scroll-to-anchor").click(function () {
var distnceFromTop = $("#anchor").offset().top;

window.parent.postMessage({ scroll: [0, distnceFromTop] }, "*");
});
});
</script>
        
<input value="Scroll To Anchor" type="button" id="button-scroll-to-anchor" />
        
<div style="height:1000px;">&nbsp;</div>
        
<div id="anchor">Anchor</div>