oEmbed

Action Network supports the oEmbed standard. You can use our oEmbed endpoint to retrieve embed code for actions using their direct links. The embed code retrieved is identical to the embed code given in our user interface (described in more detail here), and you can use URL arguments to customize the layout and styles and width, just as you can in the user interface.

Sections:

Endpoint

Endpoint and behavior:

https://actionnetwork.org/oembed/

Our oEmbed implementation lives exclusively at the above endpoint. Add URL arguments on to the end of that endpoint to retrieve the embed code from specific actions, as described below.

All oEmbed requests will return a "rich" oEmbed type containing our embed code, which uses javascript. Invalid requests will use default arguments where applicable or will return 404 not found when necessary.

Back To Top ↑

Parameters and descriptions

Parameters are passed as standard URL arguments (?foo=bar&fizz=buzz). All parameters must be URL encoded. The parameters we accept, whether they are required, and their behaviors are described in the table below.

Parameters:
Parameter Required Description
url Yes A URL pointing to the Action Network action you would like embed code for, in URL encoded format. Must be a direct link to an Action Network action page (so it must start with https://actionnetwork.org). Invalid URLs will return 404 not found.
format Indicates the format you would like to receive the oEmbed response in. One of "json" or "xml", which will return a JSON or XML response, respectively. If no format is given (or an invalid format is given), JSON will be returned by default.
maxwidth The maximum width you would like for your returned embed code, in pixels. If no maxwidth is given (or an invalid maswidth is given), the embed code returned will display with a width of 100% of its parent container.
maxheight The maxheight parameter is not supported, and will be ignored. Embed code returned has height equal to what's necessary to display the content, which can vary based on many situations.
style The styles you would like to use with your embed code. One of "standard", "layout-only", or "none", which correspond to the similar options when copying embed code from our user interface. (You can read more about those options here.) If no style is given (or an invalid style is given), standard styles will be returned by default.
layout The layout you would like to use with your embed code. One of "standard" or "full", which correspond to the similar options when copying embed code from our user interface. (You can read more about those options here.) If no layout is given (or an invalid layout is given), the standard layout will be returned by default.
Back To Top ↑

Response and descriptions

Assuming no errors and your action URL is found in our system, the oEmbed response we provide (in the format you request) will have the parameters described in the table below.

Response:
Parameter Description
type Always "rich", indicating the rich oEmbed type.
version Always "1.0", according to the oEmbed specification.
provider_name Always "Action Network".
provider_url Always "https://actionnetwork.org".
width The width of the returned embed code, in pixels. Only present if a valid maxwidth parameters was sent on the request, otherwise the embed code returned will display with a width of 100% of its parent container.
height The height parameter is not supported, and will not be returned in the response. Embed code returned has height equal to what's necessary to display the content, which can vary based on many situations.
html The html of the embed code necessary to embed the action requested. If XML format is requested, the html response is also escaped.
Back To Top ↑

Examples

Below are a few examples of how to use Action Network's oEmbed endpoint to retrieve embed code.

Here's how you would retrieve embed code in JSON format:

Request

    GET https://actionnetwork.org/oembed/?url=https%3A%2F%2F.actionnetwork.org%2Fpetitions%2Fyour-petition%3F

Response

    
200 OK

Content-Type: application/json

{
    "type": "rich",
    "version": "1.0",
    "provider_name": "Action Network",
    "provider_url": "https://actionnetwork.org",
    "html": "<link href='https://actionnetwork.org/css/style-embed-v3.css' rel='stylesheet' type='text/css' /><script src='https://actionnetwork.org/widgets/v3/petition/your-petition?format=js&source=widget'></script><div id='can-petition-area-your-petition' style='width: 100%'><!-- this div is the target for our HTML insertion --></div>"
}

And in XML format:

Request

    GET https://actionnetwork.org/oembed/?url=https%3A%2F%2F.actionnetwork.org%2Fpetitions%2Fyour-petition%3F&format=xml

Response

    
200 OK

Content-Type: text/xml

<oembed>
    <type>rich</type>
    <version>1.0</version>
    <provider_name>Action Network</provider_name>
    <provider_url>https://actionnetwork.org</provider_url>
    <html>
        &lt;link href=&#39;https://actionnetwork.org/css/style-embed-v3.css&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39; /&gt;&lt;script src=&#39;https://actionnetwork.org/widgets/v3/petition/your-petition?format=js&amp;source=widget&amp;style=full&#39;&gt;&lt;/script&gt;&lt;div id=&#39;can-petition-area-your-petition&#39; style=&#39;width: 100%&#39;&gt;&lt;!-- this div is the target for our HTML insertion --&gt;&lt;/div&gt;
    </html>
</oembed>

And finally, here's an example of how you'd use other available parameters like maxwidth, layout, and style:

Request

    GET https://actionnetwork.org/oembed/?url=https%3A%2F%2F.actionnetwork.org%2Fpetitions%2Fyour-petition%3F&maxwidth=500&layout=full&style=layout-only

Response

    
200 OK

Content-Type: application/json

{
    "type": "rich",
    "version": "1.0",
    "provider_name": "Action Network",
    "provider_url": "https://actionnetwork.org",
    "width": 500,
    "html": "<link href='https://actionnetwork.org/css/style-embed-whitelabel-v3.css' rel='stylesheet' type='text/css' /><script src='https://actionnetwork.org/widgets/v3/petition/your-petition?format=js&source=widget&style=full'></script><div id='can-petition-area-your-petition' style='width: 500px'><!-- this div is the target for our HTML insertion --></div>"
}
Back To Top ↑