Tags can be applied based on fixed values or supporter selections. To use this feature, you must update the HTML generated by the widget.
How Tags Work in Web Widgets
Tags are controlled using two hidden fields:
ActiveTags: Tags to add.
BlockedTags: Tags to remove.
Each tag must follow the format:
<TagCategory>_<TagName>
Example
To add the tag Newsletter in the Mailings category:
<input type="hidden" id="ActiveTags" value="Mailings_Newsletter" />
To add multiple tags, separate them with commas:
<input type="hidden" id="ActiveTags" value="Mailings_Newsletter,Mailings_Appeals" />
Tag names cannot contain underscores or spaces, e.g.:
Christmas_Appeal: not supported.Christmas Appeal: not supported.
Rename tags in Donorfy if necessary before using them in widgets.
Troubleshoot Tag Issues
If tags are not being added:
Go to Financial, click Online Donations, select Errors & Info tab.
Review any messages relating to tag assignment.
Check the following:
The tag category and tag name exactly match Donorfy.
There are no leading or trailing spaces in tag names or categories in Donorfy settings.
Multiple Choice Example (Checkboxes)
You can allow supporters to select multiple tags using checkboxes.
HTML Example
<label>I would like to receive information about the following<br /> <input type="checkbox" value="Mailings_Appeals" class="ActiveTag"> Appeals<br /> <input type="checkbox" value="Mailings_Newsletter" class="ActiveTag"> News<br /> <input type="checkbox" value="Mailings_Events" class="ActiveTag"> Events<br /> </label>
The value of each checkbox must contain the tag category and tag name.
The ActiveTag class identifies which checkboxes should set Active Tags.
JavaScript Example
jQuery(document).ready(function(){ $checks = jQuery("input.ActiveTag[type=checkbox]"); $checks.on('change', function() { var selectedTags = $checks.filter(":checked").map(function(){ return this.value; }).get().join(","); jQuery('#ActiveTags').val(selectedTags); }); });Single Choice Example (Dropdown)
If you want supporters to choose one tag, use a dropdown.
HTML Example
<label>How did you hear about us?<br /> <select id="HowDidYouHear"> <option value=""></option> <option value="Flags_WebSite">Website</option> <option value="Flags_Email">Email</option> <option value="Flags_SupporterEvent">Supporter Event</option> </select> </label>
JavaScript Example
jQuery("#HowDidYouHear").on("change", function() { var selectedVal = jQuery(this).find(':selected').val(); jQuery('#ActiveTags').val(selectedVal); });⚠️Important:
Web Widgets are a Professional only feature. Essential subscribers, please contact us to find out more about upgrading.