Embedding¶

What & Why¶

When you create a page, the default is to host your page with ActionKit.

You can customize your page in lots of ways by editing the relevant template as described in Customizing Pages with Templates. While ActionKit Hosted Pages provide a lot of flexibility, you might still want to host a page on your own site - for example, to integrate with a content management system or custom tools you've built.

We've made it easy for you to access ActionKit's functionality, even from pages hosted outside of ActionKit, with embedding. The embedding system lets you put our form (with our JavaScript and submitting to our server) inside one of your HTML pages, hosted on your server.

You can host any of these page types on your own server: Petition, Letter, Donation, Recurring Donation, Survey, Call, Signup, Event Creation, Event.

Pages are fully functional when moved to your site, even tricky features like Congress person lookups. Just as with pages hosted in ActionKit, your end users will be recognized, error messages returned if information is missing, and action and source data immediately written to the ActionKit database. You can include custom user and action fields in your offsite pages. For donation pages, you can even display the suggested ask amount based on the user's Highest Previous Contribution.

In fact, you can do almost anything in an offsite page that you can do by customizing your ActionKit templateset. To use the more advanced functionality, you can can customize templatesets as if you were hosting the page with ActionKit and the code we give you to embed in your site will include the custom features you've added. It's a good idea to read the templateset section above to get a sense of what's possible.

If you just want an easy way to insert a simple form in your site, your other option is to use the Ajax signup widget.

How¶

The steps for creating a page to be hosted offsite are as follows:

1 Create your page in ActionKit. Even though you're hosting the page somewhere else, ActionKit needs the information you enter when creating a page, particularly the Action basics and After-action info.

2 Make your selections on the Action basics screen just as you would for a hosted page, including selecting the fields you want the page to require.

3 Check Host outside ActionKit CMS on the Edit content screen. If you enter the page's URL, we'll link to it (so you can see it from the 'view' link on the dashboard and any end users who hit your ActionKit page will be redirected).

4 Select a templateset that includes the user form you want on the page. For example, if you want to include a custom user field, you could add the field to a templateset and select that set. Then it will be included in the user form you copy over to your page.

5 Optionally, you can enter the page content. If you don't, we'll fill the fields with placeholders.

6 Fill out the After-action info screen just as you would for a hosted page. By default, the Redirect URL will direct users to an ActionKit-hosted thank you page. If you use this option, be sure you've entered thank you content on the Edit Content screen. Alternatively, direct users to a thank you page you're hosting by entering the URL here.

7 On the final Preview/Get HTML screen, you can download the rendered page as well as view it in your browser.

On this screen you can choose:

• Include wrapper - Leave checked to download the header and footer from the templateset you selected in step 2, along with the form. Uncheck to download just the the form. Including the wrapper is a good idea if you've got a design in ActionKit already that you want to use for your page because then you can just upload the HTML to your site.
• Fix relative URLs - Leave checked and we'll change relative links in the page (like /samples/actionkit.js) to full links including your ActionKit domain.
• Make URLs HTTPS (donation pages only) - If you leave this checked, we'll make all CSS and JavaScript references use HTTPS instead of plain HTTP to avoid security warnings. You'll need to make sure your wrapper uses HTTPS too, and that the sites you load resources from are set up for HTTPS.

8 Preview your page, then download your html. After you download the HTML for your page, you may want to download the HTML for your thank you page. You can also do this from the Preview/Get HTML screen.

9 You can copy the HTML you downloaded directly to your site, or you can cut and paste the relevant sections. If you're taking the latter approach, we suggest reviewing the section on Working with Templates. You don't need to copy the Django snippets (like {% load actionkit_tags %}) over, but you do need to make sure to copy over some things like the script tag to load actionkit.js.

Things you almost certainly want to include (which are described in the Working with Templates section):

• <meta charset=UTF-8" />
• //ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
• /resources/actionkit.js
• To trigger our processing. you'll also want to have:

<script type="text/javascript">
  actionkit.forms.contextRoot = 'http://yourgroup.actionkit.com/context/';
  actionkit.forms.initPage();
  actionkit.forms.initForm('act')
</script>

• actionkit.css
• known user and unknown user divs
• User form: We suggest cutting and pasting our user form over directly. Make sure you see the custom fields you added in there.

10 Set the other site's domain as a client domain if you'd like actions from mailings to be tracked as if this were an ActionKit hosted page.

11 Test!

• View the page. Look right?
• Send yourself a test mailing linking to the page; follow the link
• Confirm you're recognized by the page if you should be
• Submit and confirm you got to the right thanks page
• Check data capture: the action, the source, user field values
• Go back and load the page with no akid; try to skip a required field and confirm you get an error, check other validation as desired
• Submit without an akid, make sure the action is recorded

addToCount({
   "goal"     : null,
   "goal_type": "actions",
   "age"      : 0.0008280277252197266,
   "time"     : 1415367730.571025,
   "total"    : {"actions": 111},
   "recent"   : {"actions": 111}
})

function setCounter(value) {
    $("#counter").html(value + ' actions taken!')
}

function combineThermometers(pages, onComplete, count) {
    var page;
    count = count || 0;

    if (pages.length) {
        page = pages.shift();
        jQuery.ajax('http://docs.actionkit.com/progress/?page=' + page,
            {
            dataType: 'jsonp',
            success: function(progress, text, xhr) {
                    combineThermometers(pages, onComplete, count + progress.total.actions)
            }
        });
    } else {
        onComplete(count);
    }
}
$(function() {
    combineThermometers(["schumer_reyes", "schumer", "conyers"], setCounter);
});

{% block meta_additions %}
  {% if request.GET.external_redirect and request.GET.external_redirect|url_at_clientdomain %}
    {% if request.GET.send_csrf %}
       {% with csrf_param='csrfmiddlewaretoken='|concatenate:csrf_token %}
      <script>window.location.replace('{{ request.GET.external_redirect|tag_links:csrf_param }}');</script>
       {% endwith %}
    {% else %}
      <script>window.location.replace('{{ request.GET.external_redirect }}');</script>
    {% endif %}
  {% endif %}
{% endblock %}