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 Builder 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"]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 text = jQuery(number).text(); // Read the Caspio output
var val = parseFloat(text.replace(/,/g,'')); // Convert to a float
if (!isNaN(val)) {
jQuery(numberCounter).attr('data-number-value', val); // 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 text = jQuery(number).text(); // Read the Caspio output
var val = parseFloat(text.replace(/,/g,'')); // Convert to a float
if (!isNaN(val)) {
jQuery(circleCounter).attr('data-number-value', val); // Insert the number from Caspio into the 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.
Hi, How do I find the CSS selector for my caspio datapage?
Hey Ashton, any chance you're able to share a link to a page displaying your caspio shortcode (i.e. the result of following the Introduction step in the post above)? The CSS selector needed depends on the output generated by the shortcode. If I'm able to see the generated output, then I should be able to work out the necessary CSS selector for you. Note, if your shortcode outputs multiple values (e.g. a table) can you also let me know which of these values it is you're wanting to use in your the module? Thanks!
Hi,
Is there a way for the number counter to display '0' rather than 'NaN'?
Hey Mark, are you trying to pull the number from Caspio? If so, I'd suspect an error in the CSS selector. If it isn't targeting the right thing, the result can be NaN in the number counter (NaN stands for "Not a Number). Is there any chance you're able to share a link to an example page, so that I can look into it for you? Thanks!
Hi Dan,
When a user first joins my site they do not have any caspio data. So the fist time they login it just displays lots of 'NaN' messages. I would like it to display '0' instead until they input their data.
After they have input data your method works perfectly.
Hey Mark, I've updated the code for both counters to include a check that a valid number has been retrieved from Caspio. If not, the module will default to the value set in the module settings – so if you set that to '0' you should get the desired result. I hope that helps!
That great thank you for your help. Sorry that was my mistake I meant to say number counter not circle counter.
I have added that 'var number' and it has worked! Although now when I try to add multiple counters to the page it doesn't seem to work correctly.
On the my web page the three number counters should read: 4, 14, 4 although it seems to be adding them together and showing: 4, 414, 4144.
How can I fix this please?
Thanks :)
Hey Ashton,
In your code modules, you need to use a different id for the caspio output each time. So, in the second code module change:
With:
And replace the line starting:
With:
Then in the third code module use "caspioOutput3" instead.
I hope that helps!
I have added the plugin to my site, added the circle counter module, deployed my caspio data page and added it to the 2nd line of code then added the code to the page in a code module.
Although I am struggling with the next two steps:
var circleCounter & var number. could you help please?
Hi aston, on your linked URL I can see a number counter rather than a circle counter. To get that number counter to work, I think you'll need to change:
var number = '#caspioOutput #caspioform .cbHTMLBlockContainer.cbFormData';
to:
var number = '#caspioOutput #caspioform .cbFormCalculatedField.cbFormData';
If you're using the same Caspio dataPage for the circle counter, this change should also work for the circle counter code given in the post.
I hope that helps, but if you have an example of a circle counter which isn't working, or need any more help with it, let me know. Thanks!