01. IFRAME Wrapping

Owned by PeterF (Deactivated)
Sept 06, 2016
3 min read

Iframe wrapping uses a special feature of the Web which allows one web site to be 'embedded' or 'enclosed'

within another website or web application.  The image below  (click to enlarge) shows a simple Noojee Campaigner dial pag

e. The light blue box in the centre of the page is an embedded CRM (Sugar CRM in this case). In this example the CRM is displaying the account information for the current lead but it can be made to display any information from the CRM.

Advantages:

A key advantage of iframe wrapping is that it is very simple to do and Noojee can setup up an iframe wrap as part of our standard deployment process.

The iframe wrap also ensure that the agent has the latest details. This is particularly useful if the you a calling existing customers who may call back in during a campaign.

Disadvantages:Integration

When agents are cold calling the additional information the CRM provides is a distraction. In these cases it is best to use the native (customisable) screen layout that Noojee Campaigner provides.

Noojee Campaigner's native screen layout is very fast to load to ensure that your agents have the customer details on screen as soon as the call connects. Most CRM's are not as fast and as such your agents can be left hanging waiting for the CRM screen to display.

When making cold calls there is little point in loading the raw leads into your CRM. They will simply clutter up your database and slow your CRM down. Its is far better to simply load the leads into Noojee Campaigner and only create an entry in your CRM once the lead becomes a customer (or prospect). Action Dispositions are designed to help with this.

Configuration

To configure an iframe you need to select the 'Source' option in the Screen Layout editor.

Note the source view requires a reasonable understanding of HTML!

Once in the source view you need to create the iframe tag which should be something similar to:

<iframe id="crm-iframe" width="100%" height="500" src="https://crm.noojee.com.au/index.php?module=Accounts&record=#raw.account_id"></iframe>

With the exception of #raw the above is a standard iframe. The #raw tag is similar to the #view and #input tags used in 05. Screen Layouts.  Using the #raw tag you can pass any 06. Fields from the 4.1 Campaign Template to the URL. Normally the field passed would be some type of unique id that identifies the lead in the target system (e.g. the account id in your crm). The unique id will need to be passed in along with all of the other lead data when the CSV is imported.

Passing Caller ID

Ideally when you load the iframe you want to display the details of the caller without your agents having to do anything.

You can do this by passing the caller id in the URL of your iframe.

Of course your CRM (or whatever you have iframed) must be able to use the passed Caller ID to do a search. You should also be aware that if the caller has blocked their CLID then the passed Caller ID will be empty.

So how do you pass the Caller ID to your iframe?

This requires a little bit of javascript as we need to manipulate the iframe url during the onConnect (and possibly onPreview) handling.

Within you Screen Layout edit the Javascript and use the following as an example on setting the clid.

$.njDialerPlugin.onConnect = function() {
   // Get the caller id
    var clid = jQuery.njDialerPlugin.getFieldValue("njDialedNumber");
     // build the URL and add the clid to the end - obviously change this to suit your crm.
    var url = "https://crm.noojee.com.au/index.php?action=UnifiedSearch&module=Home&search_form=false&advanced=false&query_string=" + clid;
    // Set the 'src' attribute on the iframe.
    // #crm-iframe tells jquery to find the html tag with an id of 'crm-iframe' so make certain your iframe has an attribute of
    // <iframe id="crm-iframe"......
    jQuery("#crm-iframe").attr('src', url);
   };