| display | fill | Ensures the widget fills the container it is placed in, rather than full screen or modal |
| headerStyle | 3 | Removes the header, for appearance purposes |
| closeBehavior | 0 | Prevents the user from closing the widget or performing any action once successfully enrolled |
| clientId | *** | Although this example uses the demo parameter rather than client id, you will need to provide your client id to launch the widget |
| clientSecret | *** | Although this example uses the demo parameter rather than client id and secret, you will need to provide your client secret |
| customerId | *** | You will need to pass in the customerId of the user who is using the widget. Not required for demo |
[HttpGet]
public string LaunchWidget_DemoEmbedded() {
try {
// Startup Parameters - Here you will include your clientId, clientSecret, and customerId
var postData = new {
display = "fill",
demo = 2,
headerStyle = 3,
closeBehavior = 0
};
var postJson = JsonConvert.SerializeObject(postData);
// Specify your widget URL - This URL may be different depending on your integration
string uri = "https://appservices.followthefrog.com/v3/test/widget/";
// Initiate the call to retrieve the widget code
WebClient client = new WebClient();
client.Headers[HttpRequestHeader.ContentType] = "application/x-www-form-urlencoded";
string result = client.UploadString(new Uri(uri), "merchant=" + postJson);
// Return the result as a string back to the client.
// The client will inject this result into the page content
return result;
}
catch (Exception e) {
return e.Message;
}
}
<!-- Loading Message -->
<div id="widget_demo_embedded_loading">
<img src="~/images/Loading_Green.gif" />
<span>Loading banks, please wait...</span>
</div>
<!-- Widget Container -->
<div id="widget_demo_embedded_widget"></div>
// This example uses JQuery
// Make a GET call to your server-side function
$.get('/Widgets/LaunchWidget_DemoEmbedded', function (resp) {
// Inject the response into the widget container
$('#widget_demo_embedded_widget').html(resp);
// Handle the ready event
Cashflow.ready = function () {
// Launch the widget immediately after it is loaded
Cashflow.open();
// Hide the loading message
$('#widget_demo_embedded_loading').hide();
}
// Initialize the widget, specifying it's container name
Cashflow.init({ target: $('#widget_demo_embedded_widget') });
});
/* Specify the dimensions of the widget on your page */
#widget_demo_embedded_widget {
height: 200px;
width: 100%;
max-width: 750px;
min-width: 300px;
}
/* Loading message while the widget is loading */
#widget_demo_embedded_loading {
padding-left: 20px;
}