How to embed an Agorapulse app on your website

With the external embed option, you have the ability to integrate your Agorapulse applications directly onto your website and acquire new quality fans from your organic web traffic.

There are 2 methods to do this:

The basic integration (iframe) and the advanced integration (html+java)

Some differences between those 2 methods need to be considered according to your goals.

The first method (basic integration (iframe)) displays the app directly on the page. This requires a large page with a lot of space to dedicate to your app.

The second method (advanced integration (html+java)) uses a link; it’s more like a banner, but it can be displayed easily on a page.

Here’s how you do it:

Basic embed:

Simply embed the following code on the page of your website you choose

<iframe src="Embed URL" height="630" width="860" seamless></iframe>

Note: we do not recommend you use this method to embed your app on a page with a lot of traffic- like your home page, for example. If that’s what you need to do, you’ll be better off using the advanced integration.

Adavanced integration:

The second method requires more technical skills but can carry more weight, should you decide to display your app on a page with a lot of traffic.

The following marker needs to be integrated into the head marker of your website

<title>Integration Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" />

then, integrate the following markers within the body of your page

<script type="text/javascript">
$(function() {
 var appUrl = "URL d'intégration";
 var appHeight = 630;
 var appWidth = 860;
 $("#appLink").click(function() {
 $("#appIFrame").attr("src", appUrl);
 $("#appDiv").show().dialog({height:appHeight, width:appWidth, modal:true});
 return false;
 })
 });
 </script>
 <div id="appDiv" style="display: none;">
<!-- Adapt height depending on the max height of your app -->
 <iframe id="appIFrame" height="650" width="820" frameborder="0" scrolling="no"></iframe>
 </div>
 <!-- Link or button to open dialog -->
 <a id="appLink" href="#appDiv">Launch app</a>

FAQ on external integration:

agorapulse-app-embed-websiteWhere do I find my integration url?
Your integration url is available by clicking on the ‘app parameters’ button. Switch to ‘ON’ to activate the external integration.

How much does it cost?
Nothing if you have a premium plan, this feature is included.

Is it necessary for my page’s visitors to have a Facebook account in order to participate in the integrated version?
Yes, the conditions are the same as on Facebook. Visitors will have to log in to their Facebook account, become a fan and/or fill in the qualification form if you have activated those options.

Why are the steps inverted on this version? A non-fan sees the home page before they see the “like” page
Absolutely normal. On Facebook we already know whether the user has liked the page or not. On the integrated version, we don’t have this information until the user has clicked on the participation button and installed the app. Once that is done, we send the non fans to the step which makes the “like” compulsory.