Customizing widgets and pages with page wrappers using javascript

Because widgets output HTML directly onto a page (and pages with page wrappers use widgets), you can customize widgets further with javascript. For example, you can use javascript to change the text of our submit buttons, or do something different after a successful form submission. This feature is only available to paying partners. To become a paying partner, visit actionnetwork.org/partnerships. 

To do so, listen to the custom events our widgets emit targeted at the document when they're fully loaded or when their forms are submitted, and do your customization work after the event fires.

Widgets fire two events when they load (including when an activist logs out and the form is reset to a blank state):

• can_embed_loaded is fired when any widget loads
• {{ widget ID }}_loaded is fired when a particular widget loads, allowing you to identify which widget in particular has loaded if you have more than one on a page. The widget ID is the same string as the ID on the <div> that comes along with your widget embed code. For example, the event fired for a petition titled "My Petition" is can-petition-area-my-petition_loaded.

Sample jQuery code utilizing these events to change the submit button text looks like this:

<script type="text/javascript">
$(document).ready(function() {
    $(document).on('can_embed_loaded', function() {
        // do your work here, after the widget is loaded
        $('input[name="commit"]').val('Sign My Awesome Petition');
    });
});
</script>

Widgets fire two events when their forms are successfully submitted:

• can_embed_submitted is fired when any widget's form is successfully submitted
• {{ widget ID }}_submitted is fired when a particular widget's form is successfully submitted, allowing you to identify which widget form in particular has been submitted if you have more than one on a page. The widget ID is the same string as the ID on the <div> that comes along with your widget embed code. For example, the event fired for a petition titled "My Petition" is can-petition-area-my-petition_submitted.

Sample jQuery code utilizing these events to change the thank you page text looks like this:

<script type="text/javascript">
$(document).ready(function() {
     $(document).on('can_embed_submitted', function() {
          // do your work here, after the widget form is submitted
          $('#can_thank_you h1').html('Thanks!');
     });
});
</script>

A few notes to keep in mind:

• While fundraising and ticketed event widgets will fire the loaded events, due to the fact that they exist in iframes for security reasons, these events will be of limited utility.
• Fundraising and ticketed event widgets will not fire submitted events or fire load events when an activist logs out and clears the form, again due to cross-domain iframe restrictions.
• Event campaign will fire load events as the activist moves through the event campaign widgets from searching to finding an event to RSVP go. If an activist navigates to an event and RSVPs, the submitted events will fire then.
• The load events fire essentially every time the widget is loaded, so an activist logging out and clearing the form will fire the load events again.
• The submitted events fire essentially every time the thank you page loads in the widget. So, letter campaign widgets will not fire the submitted events until the activist has written their letters and is on the thank you page. Similarly, if an activist posts on the discussion board using event widget, the submitted event will fire again after that successful post.