Integrating Caspio DataPages into Divi Modules

This post may contain referral links which may earn a commission for this site

Caspio is a platform for building online database apps without the need to write code. It allows integration with WordPress via its DataPage feature. Here's how to make use of Caspio DataPages within Divi modules.

Introduction

DataPages allow reports (graphs, metrics, etc,) to be generated and embedded into websites. Within your Caspio account you can "deploy" the DataPage to get the embed code needed to display it on your site. If you select the WordPress option within the deploy settings you'll be given a WordPress shortcode, that looks something like this:

[caspio method="embed" subdomain="true" url="https://abcd1234.caspio.com" appkey="1234567890abcdef1234567890ab" async="true"]
To use this shortcode, you must install the Caspio Custom Database Applications plugin. Then place the shortcode somewhere on your site, e.g. within a Divi code module and you should then be able to see the output from your DataPage.

Note that if you enable authentication in the DataPage settings you'll be presented with a login box (or similar) on your site to be filled out before the actual DataPage output is shown.

Displaying a Caspio DataPage Metric in the Number Counter Module

If your Caspio DataPage outputs a number, such as metric, one option for displaying it is using the Divi Number Counter module which animates the count up from zero to your number on page load. To achieve this, first add a number counter module to your page. Then add a code snippet module later in the page than the number counter and place code such as this into it:

<div id="caspioOutput" style="display:none;">
	[caspio method="embed" subdomain="true" url="https://abcd1234.caspio.com" appkey="1234567890abcdef1234567890ab" async="false"]
</div> 
<script> 
	var numberCounter = '.et_pb_number_counter_0'; // CSS selector for your number counter
	var number = '#caspioOutput #caspioform .cbHTMLBlockContainer.cbFormData'; // CSS selector for the number in your Caspio output
	var counterVal = jQuery(number).text(); // Read the number from the Caspio output
	counterVal = counterVal.replace(/,/g,''); // Strip the comma from numbers such as 1,234
	jQuery(numberCounter).attr('data-number-value', counterVal); // Insert the number from Caspio into the number counter module
</script>

You will need to make a few changes before it works, however:

  • Replace the shortcode on the second line with the one from your Caspio DataPage deploy. 
  • Change the async parameter in the shortcode to "false" (as in the example above). This ensures that the animation of the number counter is delayed until the number is fetched from Caspio.
  • Change the line starting "var numberCounter = …" to contain a CSS class / selector for your number counter. If you are targetting the first / only number counter on your page, the above code should work. 
  • Change the line starting "var number = …" to contain a CSS selector which locates your metric within the HTML output generated by the Caspio shortcode. Note that Caspio returns HTML and there isn't (to my limited knowledge) an easier way to come up with the CSS selector than to examine the output for a particular DataPage (e.g. in your browser's HTML Inspector). 

Displaying a Caspio DataPage Metric in the Circle Counter Module

In the same was as for the number counter module (described above), we can display a metric in the Circle Counter, which animates the number (typically a percentage) on the perimeter of a circle. To achieve this, first add a circle counter module to your page. Then add a code snippet module later in the page than the circle counter and place code such as this into it:

<div id="caspioOutput" style="display:none"> 
	[caspio method="embed" subdomain="true" url="https://abcd1234.caspio.com" appkey="1234567890abcdef1234567890ab" async="false"] 
</div> 
<script> 
	var circleCounter = '.et_pb_circle_counter_0 .et_pb_circle_counter_inner'; // CSS selector for your circle counter
	var number = '#caspioOutput #caspioform .cbFormCalculatedField.cbFormData'; // CSS selector for the number in your Caspio output
	var counterVal = jQuery(number).text(); // Read the number from the Caspio output
	counterVal = counterVal.replace(/,/g,''); // Strip the comma from numbers such as 1,234
	jQuery(circleCounter).attr('data-number-value', counterVal); // Insert the number from Caspio into the circle counter module
</script>

Again, you will need to make a few changes before it works:

  • Replace the shortcode on the second line with the one from your Caspio DataPage deploy. 
  • Change the async parameter in the shortcode to "false" (as in the example above). This ensures that the animation of the circle counter is delayed until the number is fetched from Caspio.
  • Change the line starting "var circleCounter = …" to contain a CSS class / selector for your circle counter. If you are targetting the first / only circle counter on your page, the above code should work. 
  • Change the line starting "var number = …" to contain a CSS selector which locates your metric within the HTML output generated by the Caspio shortcode. Note that Caspio returns HTML and there isn't (to my limited knowledge) an easier way to come up with the CSS selector than to examine the output for a particular DataPage (e.g. in your browser's HTML Inspector). 

A Note on SEO Deployments

So far this post has dealt with the standard DataPage deploy shortcodes available in all versions of Caspio, including free accounts. Caspio also offers an "SEO deployment" feature in some of its premium accounts. While the standard shortcodes output JavaScript which runs in the user's browser, with SEO deployment shortcodes run on the server, allowing the DataPage output to be inserted into the page at the time the page is generated. I haven't yet explored how this impacts on the above Divi integrations, but if you're having trouble getting it to work let me know in the comments and I'll be happy to take a look.

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *