Socialcast Learn About Socialcast

Embedding Reach in Third-Party Applications

Adding Reach Extensions to various pages in your intranet is a simple process because you have access to the source code for those pages. As a result you can embed the desired Reach Extension on every page and follow the Reach deployment best practices to improve efficiency. Achieving the same level of control in a third-party application is not always as straightforward.

Some third-party applications offer access to page templates and HTML as well as the application codebase, giving you nearly as much control as you have in your own intranet. Other third-party applications do not provide access to the code base or the individual pages. In many cases you can circumvent this roadblock using JavaScript — as long as the application provides an admin feature for inserting JavaScript into a global template. You can take advantage of this feature to embed a script with conditional logic in every application page. Based on the page content, this script would decide which Reach Extension (if any) to display on the page.

The following scenarios explain how to use conditional scripts in an application that supports external JavaScript.

Discussions within a Bug Tracker

Scenario: Suppose your host application is a bug tracking program and you want to embed a Reach Discussion on all “Issue” pages within the application. Let’s assume that every Issue page has an element with the ID issue_page and a container with the ID issue_discussion where you could append the Reach Extension.

Solution:Write a script that examines each page to see if it contains the element issue_page. If so, the script would designate the issue_discussion element as the container for the extension.

if (document.getElementById('issue_page')){

var _reach = _reach || [];
_reach.push({
  container: 'issue_discussion',
   domain: 'https://your-socialcast-domain',
  token: 'xxxxxxxxxxxxxxxxxxxx'
});

(function(){
  var e=document.createElement('script'); e.type='text/javascript';
  e.async = true;
  e.src= document.location.protocol + 'your-socialcast-domain/services/reach/extension.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(e, s);
})();

}

Embedding Extensions within a custom layout

Scenario: Like Scenario 1, this scenario assumes that you want to embed a Reach Discussion on all “Issue” pages in your bug tracking application. This time, suppose that you need more control over where you place the extension on each page. We’ll assume that every Issue page has an issue_page element and a global footer with the ID global_footer.

Solution: Write a script that checks each application page to see if it contains the issue_page element. If so, the script would create a new element, append it to the global footer, and then specify the new element as the target Reach container.

if (document.getElementById('issue_page')){
var _reach = _reach || [];

_reach.push({
  container: ‘reach_footer_container’,
  domain: ‘https://your-socialcast-domain’,
  token: ‘xxxxxxxxxxxxxxxxxxxx’
});

(function(){
// Create a new container for Reach and append it to the global footer

  var container = document.createElement('div');
  container.id = 'reach_footer_container';
  container.setAttribute('style', 'height: 400px'); // Optional

  var globalFooter = document.getElementById('global_footer');

  if (globalFooter){
    globalFooter.appendChild(container);
  }

  var e=document.createElement('script'); e.type='text/javascript';
  e.async = true;
  e.src= document.location.protocol + ‘your-socialcast-domain/services/reach/extension.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(e, s);
})();
}