Tutorial: Get Embed Code Version 2
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/v2/forms/8a0ab1b8-f965-4a96-bbd7-f500690d4beb
Header:
OSDI-API-Token: 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" ], "origin_system": "Action Network", "created_date": "2014-03-06T18:09:08Z", "modified_date": "2014-03-06T19:24:17Z", "title": "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", "browser_url": "https://actionnetwork.org/forms/take-our-end-of-year-survey", "total_submissions": 251, "action_network:hidden": false, "_embedded": { "osdi:creator": { "given_name": "John", "family_name": "Doe", "created_date": "2014-02-18T19:44:49Z", "modified_date": "2014-02-25T16:08:26Z", "identifiers": [ "action_network:c945d6fe-929e-11e3-a2e9-12313d316c29" ], "email_addresses": [ { "primary": true, "address": "johndoe@mail.com", "status": "subscribed" } ], "phone_numbers": [ { "primary": true, "number_type": "Mobile", "status": "unsubscribed" } ], "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" } } ], "languages_spoken": [ "en" ], "_links": { "self": { "href": "https://actionnetwork.org/api/v2/people/c945d6fe-929e-11e3-a2e9-12313d316c29" }, "osdi:attendances": { "href": "https://actionnetwork.org/api/v2/people/c945d6fe-929e-11e3-a2e9-12313d316c29/attendances" }, "osdi:signatures": { "href": "https://actionnetwork.org/api/v2/people/c945d6fe-929e-11e3-a2e9-12313d316c29/signatures" }, "osdi:submissions": { "href": "https://actionnetwork.org/api/v2/people/c945d6fe-929e-11e3-a2e9-12313d316c29/submissions" }, "osdi:donations": { "href": "https://actionnetwork.org/api/v2/people/c945d6fe-929e-11e3-a2e9-12313d316c29/donations" }, "osdi:outreaches": { "href": "https://actionnetwork.org/api/v2/people/c945d6fe-929e-11e3-a2e9-12313d316c29/outreaches" }, "osdi:taggings": { "href": "https://actionnetwork.org/api/v2/people/c945d6fe-929e-11e3-a2e9-12313d316c29/taggings" } } } }, "_links": { "self": { "href": "https://actionnetwork.org/api/v2/forms/8a0ab1b8-f965-4a96-bbd7-f500690d4beb" }, "osdi:submissions": { "href": "https://actionnetwork.org/api/v2/forms/8a0ab1b8-f965-4a96-bbd7-f500690d4beb/submissions" }, "osdi:record_submission_helper": { "href": "https://actionnetwork.org/api/v2/forms/8a0ab1b8-f965-4a96-bbd7-f500690d4beb/submissions" }, "osdi:creator": { "href": "https://actionnetwork.org/api/v2/people/c945d6fe-929e-11e3-a2e9-12313d316c29" }, "action_network:embed": { "href": "https://actionnetwork.org/api/v2/forms/8a0ab1b8-f965-4a96-bbd7-f500690d4beb/embed" }, "curies": [ { "name": "osdi", "href": "https://actionnetwork.org/docs/v2/{rel}", "templated": true }, { "name": "action_network", "href": "https://actionnetwork.org/docs/v2/{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/v2/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_standard_default_styles": "<link href='https://actionnetwork.org/css/style-embed.css' rel='stylesheet' type='text/css' /><script src='https://actionnetwork.org/widgets/petition/take-our-end-of-year-survey?format=js&source=widget'></script><div id='can-petition-area-take-our-end-of-year-survey' style='width: 100%'><!-- this div is the target for our HTML insertion --></div>", "embed_standard_layout_only_styles": "<link href='https://actionnetwork.org/css/style-embed-whitelabel.css' rel='stylesheet' type='text/css' /><script src='https://actionnetwork.org/petition/take-our-end-of-year-survey?format=js&source=widget'></script><div id='can-petition-area-take-our-end-of-year-survey' style='width: undefined'><!-- this div is the target for our HTML insertion --></div>", "embed_standard_no_styles": "<script src='https://actionnetwork.org/widgets/petition/take-our-end-of-year-survey?format=js&source=widget'></script><div id='can-petition-area-take-our-end-of-year-survey' style='width: undefined'><!-- this div is the target for our HTML insertion --></div>", "embed_full_default_styles": "<link href='https://actionnetwork.org/css/style-embed.css' rel='stylesheet' type='text/css' /><script src='https://actionnetwork.org/widgets/petition/take-our-end-of-year-survey?format=js&source=widget&style=full'></script><div id='can-petition-area-take-our-end-of-year-survey' style='width: undefined'><!-- this div is the target for our HTML insertion --></div>", "embed_full_layout_only_styles": "<link href='https://actionnetwork.org/css/style-embed-whitelabel.css' rel='stylesheet' type='text/css' /><script src='https://actionnetwork.org/widgets/petition/take-our-end-of-year-survey?format=js&source=widget&style=full'></script><div id='can-petition-area-take-our-end-of-year-survey' style='width: undefined'><!-- this div is the target for our HTML insertion --></div>", "embed_full_no_styles": "<script src='https://actionnetwork.org/widgets/petition/take-our-end-of-year-survey?format=js&source=widget&style=full'></script><div id='can-petition-area-take-our-end-of-year-survey' style='width: undefined'><!-- this div is the target for our HTML insertion --></div>", "_links": { "self": { "href": "https://actionnetwork.org/api/v2/forms/8a0ab1b8-f965-4a96-bbd7-f500690d4beb/embed" }, "curies": [ { "name": "osdi", "href": "https://actionnetwork.org/docs/v2/{rel}", "templated": true }, { "name": "action_network", "href": "https://actionnetwork.org/docs/v2/{rel}", "templated": true } ] } }
Here you can see the embed code, presented in various formats including default, layout only, and no styles, and standard and full variants.
Click here for full documentation of embed resources.
Back To Top ↑