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 ↑

Next Tutorial: Add people to your email list