All customer portals are designed to be placed within your website via an iframe. The easiest way to do this is simply embed the call to the portal, with your organization ID, within the iframe tags. You can find your URL’s by going to Admin/My Portal within your account.

Embedding vs Standalone URL

If you are undecided as to whether you think embedding the portal in your website is right for you, here is an analysis of your options:

Pros and Cons for embedding the Advanced Portal on your website:

Pros

  • Your customers will have a seamless experience when transitioning from your website to the Portal
  • Your customers will not know that they are actually on code (within an iframe) hosted by TeamSupport
  • There is minimal configuration needed on the actual portal because your webpage has the necessary branding (you can add CSS to the portal that matches your website if necessary)

Cons

  • Light HTML development is required
  • May need to work with your Development and Marketing teams to get the page online

Pros and cons for using the provided URL as a standalone page:

Pros

  • Embedding and HTML coding is not required. Fully functional as is as a standalone page out of the box
  • No need to work with your IT / marketing team (if applicable)
  • You can add a logo and custom CSS to the page if you would like for branding.

Cons

  • Your customers will see the “portal.[ServerName].teamsupport.com/yourcompanyname” URL
  • If your customers find a Support link on your webpage, they will have to navigate to another tab to display the portal

Note: If you embed your portal within your website, you will want to adjust two email templates. Go to Admin, Email tab then scroll to the bottom where the templates are located. The two you will need to edit are:

  • Welcome new user – portal
  • Reset password – portal

Here is an example of what you will want. Note – you will put your website URL for the href tag below. This will ensure your customers are directed to your website page that you have the portal embedded in.

A new account has been created for you in the {{MyCompany.Name}} support portal.<br />
<br />
Your user ID is: {{PortalUser.Email}}<br />
Your new temporary password is: " {{Password}} "<br />
<br />
Click <a href="http://www.yourwebsite.com/support">here</a> to login in and change your password.<br />
<br />

Advanced Portal:

<IFRAME SRC="https://portal.[ServerName].teamsupport.com/youraccountname" TITLE="Customer Support Portal"></iframe>

Public Portal:

<IFRAME SRC="https://publicportal.[ServerName].teamsupport.com/youraccountname" TITLE="Customer Support Portal"></iframe>

Ticket Submission Form Only:

<IFRAME SRC="https://ticket.[ServerName].teamsupport.com/youraccountname" TITLE="Ticket Submission Form"></iframe>

Public Knowledge Base Only:

<IFRAME SRC="https://kb.[ServerName].teamsupport.com/youraccountname" TITLE="Public Knowledge Base"></iframe>  

Here’s a good article which describes the iframe tag in a bit more detail.

Regarding the Advanced Portal: The only problem with this method is that when one of your customers gets a notification about a change to a ticket they created through the portal (via our “Web Conversation” feature), the default link simply goes to “https://portal.[ServerName].TeamSupport.com/youraccountname”. This will work, but the portal will not be displayed within the iframe – it will be a “naked” stand alone page.

Solution:

Solving this requires a little bit of software development and HTML knowledge. You need code on the top level page (the one that hosts the iFrame) which will pass the parameters from the main page to the iframe.

For example, if your main support page is at “http://www.acmeco.com/support”, then when a user clicks on a link in an e-mail they would attempt to go to “http://www.acmeco.com/support?organizationid=11111&ticketid=22222”.

The code on the page needs to change the iframe url so it reads

"https://portal.[ServerName].teamsupport.com?organizationid=11111&ticketid=22222"

There are multiple ways to do this, but we’ve provided samples below for JavaScript and PHP.

Once you have this page set up, go to Admin-My Portal settings in TeamSupport and change the “External Portal Link” to point to the page you created with the JavaScript.

Now when an e-mail is sent to a customer about a ticket update, the link will point towards your iframe embedded portal page!

JavaScript Code Sample

JavaScript is very sensitive to capitalization, so make sure that OrganizationID and TicketNumber are capitalized correctly.

Note: You’ll need to replace “xxxx” with your organization id.

<html>
<head>
  <title>Portal Example</title>
  <script language="javascript" type="text/javascript">
    function pageLoad() {
      var ticketNumber = getQueryParamValue("TicketNumber", window.location);
      var organizationID = getQueryParamValue("OrganizationID", window.location);
      var url = "https://portal.[ServerName].TeamSupport.com?OrganizationID=xxxx";

      if (ticketNumber != null)
      {
        var url = "https://portal.[ServerName].TeamSupport.com/protected/ticketdetail.aspx?TicketNumber=" + ticketNumber + "&OrganizationID=" + organizationID;
      }
      var frame = document.getElementById("frmPortal");
      frame.setAttribute('src', url);

    }

    function getQueryParamValue(name, url) {
      params = url.search.substring(1);
      name = name.toLowerCase();
      param = params.split("&");
      for (i = 0; i < param.length; i++) {
        value = param[i].split("=");
        if (value[0].toLowerCase() == name) {
          return this.unescape(value[1]);
        }
      }
    }   
  </script>

</head>

PHP Code Sample

Note: You’ll need to replace “xxxx” with your organization id.

<?php

$qs = create_qs("all");

if($_GET['iframe_test'] == 1){
    $iframe_url = 'iframe_test.php';
}
else if($_GET == array() || !$_GET){ 
    $iframe_url = 'https://portal.[ServerName].teamsupport.com?OrganizationID=xxxx';
}else if($_GET['TicketNumber'] !=""){
    $iframe_url = 'http://portal.[ServerName].teamsupport.com/protected/ticketdetail.aspx'.$qs;
}else{s
    $iframe_url = 'https://portal.[ServerName].teamsupport.com'.$qs;
}

function create_qs($vars,$addvar=""){
    if($vars == "all"){ $vars = array_keys($_GET); }
    $queryString = "";

    if(!is_array($addvar)){ 
        $addvar = explode(",",$addvar); 
        $ta = array(); 
        foreach($addvar as $keyval){ 
            $temp = explode("=",$keyval); 
            $k = $temp[0];
            $ta[$k] = $temp[1];
        } 
        $addvar = $ta;
    }
    $addKeys = array_keys($addvar);

    if(!is_array($vars)){
        $vars = explode(",",$vars); 
        foreach($vars as $key => $value){ 
            $vars[$key] = trim($value); 
        } 
    }
    foreach($vars as $key){    
        if(in_array($key,$addKeys)){ continue; }    
        if($queryString == ""){ $q_a = "?"; }else{ $q_a = "&"; }
        if($_GET[$key] == ""){ $x = ""; }else{ $x = $q_a.$key."=".$_GET[$key]; }
        $queryString .= $x;
    }
    if($addvar != ""){
        foreach($addvar as $key => $value){            
            if($queryString == ""){ $q_a = "?"; }else{ $q_a = "&"; }                
            if($value == ""){ $x = ""; }else{ $x = $q_a.$key."=".$value; }
            $queryString .= $x;
        }            
    }
    return $queryString;
}

?>

The above code will create a variable called $iframe_url which can be used to call the iframe with the correct parameters. Opening the iframe looks something like this:

<iframe name="knowledgebase" id="knowledgebase" src="<?php echo $iframe_url; ?>" width="950" height="1200" align="center" frameborder="0" noresize="noresize" scrolling="yes" style="overflow-x:hidden"></iframe>

Need more help with this?
Don’t hesitate to contact us here.

Was this helpful?

Yes No
You indicated this topic was not helpful to you ...
Could you please leave a comment telling us why? Thank you!
Thanks for your feedback.