Has anyone tried to embed a progress bar for an online form without embedding the full form? It seems like it should be possible theoretically but there’s nothing in the link and embed options. Perhaps someone has figured out a way to do it?
It would be helpful to be able to embed progress bars or otherwise represent the number of online action submitters without having to embed the full form.
My specific use case is wanting to embed a couple of different progress bars on a campaign webpage so folks can see the number of submissions for a couple of different online action forms (a traditional petition and a sign-on letter petition). We don’t want the forms embedded on the page because they would take up too much space and not look right as part of the design — we have compact, eye-catching call-to-action boxes with buttons linking to the forms. We’d like to have all the progress bars in one place so we can direct legislators there to view up-to-date numbers.
Related, right now for at least some online actions they can be one-page or multi-step — it could be useful if instead of that being exclusively a setting (though having it as a setting for the appearance of the non-embedded form would still be useful), there could be different embed codes for progress bar only, multi-step and one-page depending on application. I’ll try to submit that suggestion and maybe some of you would like to join me?
I could see another possible solution using an online activity report but ideally the data would refresh regularly and be easily embeddable. I don’t have the coding chops to figure out a way to develop a workaround using scheduled reports.
Best answer by Paul Kittredge
Hey @melissa! This is technically possible, but not necessarily easy to accomplish. I’ve commented about this previously, but here’s a more robust answer:
Once you enable the progress bar for an Online Actions form, that form now has an associated JSON object that has a bunch of available key-value pairs. You can see an example form’s progress meter JSON object here (note that Firefox’s presentation of that object is clear out of the box; by default Chrome just displays it as one long string).
That object has a standard URL, which is https://secure.everyaction.com/v2/forms/{{XXXX}}/progress where {{XXXX}} is the form ID for that form. So for the example URL above, the associated form is https://secure.everyaction.com/wOr3jWMmxUCc-DKTHOFCCw2.
This is laid out in more detail in the code at https://www.paulkittredge.dev/sample/modify-progress-meter.html, but once you have that JSON object, you can grab its associated values and then inject them into your page. So once you wrap your head around what’s going on, it should be pretty straightforward for a decent front-end developer to ingest the JSON for each of the forms that you want, and then place them where you want them on the page. That doesn’t mean it’s easy to do that, especially if you’re working inside a CMS that doesn’t give you the control to do that. But in theory, you have access to the numbers, and then can pull them in and display them where you want.
Note that once you enable the progress meter on the form, it’ll show up on the form. So you might want to introduce some kind of custom CSS or JS on your embedded forms, to hide the out-of-the-box progress meters when they show up.
That JSON endpoint is neither cached nor rate limited. So you should be getting real-time data on every request.
Hey @melissa! This is technically possible, but not necessarily easy to accomplish. I’ve commented about this previously, but here’s a more robust answer:
Once you enable the progress bar for an Online Actions form, that form now has an associated JSON object that has a bunch of available key-value pairs. You can see an example form’s progress meter JSON object here (note that Firefox’s presentation of that object is clear out of the box; by default Chrome just displays it as one long string).
That object has a standard URL, which is https://secure.everyaction.com/v2/forms/{{XXXX}}/progress where {{XXXX}} is the form ID for that form. So for the example URL above, the associated form is https://secure.everyaction.com/wOr3jWMmxUCc-DKTHOFCCw2.
This is laid out in more detail in the code at https://www.paulkittredge.dev/sample/modify-progress-meter.html, but once you have that JSON object, you can grab its associated values and then inject them into your page. So once you wrap your head around what’s going on, it should be pretty straightforward for a decent front-end developer to ingest the JSON for each of the forms that you want, and then place them where you want them on the page. That doesn’t mean it’s easy to do that, especially if you’re working inside a CMS that doesn’t give you the control to do that. But in theory, you have access to the numbers, and then can pull them in and display them where you want.
Note that once you enable the progress meter on the form, it’ll show up on the form. So you might want to introduce some kind of custom CSS or JS on your embedded forms, to hide the out-of-the-box progress meters when they show up.
That JSON endpoint is neither cached nor rate limited. So you should be getting real-time data on every request.
