Tutorial: Get Embed Code
Note: This documentation describes Version 1 of our API, which is now depreciated. It will continue to work, but it will not reveive any updates or bug fixes. We recommend you use Version 2 instead. Documentation for this tutorial for Version 2 of our API is available here.
This tutorial demonstrates how to get the embed code for an action, in this case a form.
Steps:
Calling a specific form
From the API entry point, navigate to the action type you're interested in, and then the specific action you'd like to get the embed code for. In this tutorial, we'll be getting the embed code for a specific form. Call the form resource like so:
GET https://actionnetwork.org/api/v1/forms/8a0ab1b8-f965-4a96-bbd7-f500690d4beb
Header:
api-key:[your api key here]
Which will return a response like this:
200 OK Content-Type: application/hal+json Cache-Control: max-age=0, private, must-revalidate{ "identifiers": [ "action_network:8a0ab1b8-f965-4a96-bbd7-f500690d4beb" ], "created_at": "2014-03-06T18:09:08Z", "modified_at": "2014-03-06T19:24:17Z", "summary": "Take our end of year survey", "description": "<p>Please fill out our survey to let us know what's important to you this year.</p>", "call_to_action": "Share your tip", "url": "https://actionnetwork.org/forms/take-our-end-of-year-survey", "total_submissions": 251, "_embedded": { "osdi:creator": { "given_name": "Jane", "family_name": "Miller", "identifiers": [ "action_network:c945d6fe-929e-11e3-a2e9-12313d316c29" ], "email_addresses": [ { "primary": true, "address": "j.miller@mail.com" } ], "postal_addresses": [ { "primary": true, "address_lines": [ "1600 Pennsylvania Ave." ], "locality": "Washington", "region": "DC", "postal_code": "20009", "country": "US", "language": "en", "location": { "latitude": 38.919, "longitude": -77.0379, "accuracy": "Approximate" } } ], "_links": { "self": { "href": "https://actionnetwork.org/api/v1/people/c945d6fe-929e-11e3-a2e9-12313d316c29" }, "osdi:question_answers": { "href": "https://actionnetwork.org/api/v1/people/c945d6fe-929e-11e3-a2e9-12313d316c29/question_answers" }, "osdi:attendance": { "href": "https://actionnetwork.org/api/v1/people/c945d6fe-929e-11e3-a2e9-12313d316c29/attendance" }, "osdi:signatures": { "href": "https://actionnetwork.org/api/v1/people/c945d6fe-929e-11e3-a2e9-12313d316c29/signatures" }, "osdi:submissions": { "href": "https://actionnetwork.org/api/v1/people/c945d6fe-929e-11e3-a2e9-12313d316c29/submissions" }, "osdi:donations": { "href": "https://actionnetwork.org/api/v1/people/c945d6fe-929e-11e3-a2e9-12313d316c29/donations" }, "curies": [ { "name": "osdi", "href": "https://actionnetwork.org/docs/v1/{rel}", "templated": true }, { "name": "action_network", "href": "https://actionnetwork.org/docs/v1/{rel}", "templated": true } ] } } }, "_links": { "self": { "href": "https://actionnetwork.org/api/v1/forms/8a0ab1b8-f965-4a96-bbd7-f500690d4beb" }, "osdi:submissions": { "href": "https://actionnetwork.org/api/v1/forms/8a0ab1b8-f965-4a96-bbd7-f500690d4beb/submissions" }, "osdi:creator": { "href": "https://actionnetwork.org/api/v1/people/c945d6fe-929e-11e3-a2e9-12313d316c29" }, "action_network:embed": { "href": "https://actionnetwork.org/api/v1/forms/8a0ab1b8-f965-4a96-bbd7-f500690d4beb/embed" }, "curies": [ { "name": "osdi", "href": "https://actionnetwork.org/docs/v1/{rel}", "templated": true }, { "name": "action_network", "href": "https://actionnetwork.org/docs/v1/{rel}", "templated": true } ] } }
In the response you are able to see and parse data about this form -- the form's name, the URL to the signup page on the Action Network, who created the form, the total number of submissions, etc...
Back To Top ↑Get the embed code
Using the links provided, you can see the embed code that goes with this form, which you can use to embed it on any website.
Call the embed resource like this:
GET https://actionnetwork.org/api/v1/forms/8a0ab1b8-f965-4a96-bbd7-f500690d4beb/embed
Header:
api-key:[your api key here]
Which will return a response like this:
200 OK Content-Type: application/hal+json Cache-Control: max-age=0, private, must-revalidate{ "embed_with_styles": "<link href='https://actionnetwork.org/css/style-embed.css' rel='stylesheet' type='text/css' /><script src='https://actionnetwork.org/widgets/form/have-a-story-to-tell-blow-the-whistle-here?format=js&source=widget'></script><div id='can-form-area-have-a-story-to-tell-blow-the-whistle-here' style='width: 100%'><!-- this div is the target for our HTML insertion --></div>", "embed_no_styles": "<script src='https://actionnetwork.org/widgets/form/have-a-story-to-tell-blow-the-whistle-here?format=js&source=widget'></script><div id='can-form-area-have-a-story-to-tell-blow-the-whistle-here' style='width: undefined'><!-- this div is the target for our HTML insertion --></div>", "_links": { "self": { "href": "https://actionnetwork.org/api/v1/forms/8a0ab1b8-f965-4a96-bbd7-f500690d4beb/embed" }, "curies": [ { "name": "osdi", "href": "https://actionnetwork.org/docs/v1/{rel}", "templated": true }, { "name": "action_network", "href": "https://actionnetwork.org/docs/v1/{rel}", "templated": true } ] } }
Here you can see the embed code, presented with or without our default styles.
Click here for full documentation of embed resources.