Covered topics

Hearken's form embed is a responsive, customizable form designed to collect questions and responses from your community. You can configure the embed quickly and simply with the steps explained below.

Remember: The more visible you make your embed (the more spots on your site you embed it and the more times you share the link on social media), the more responses you’ll collect. You can embed the form anywhere and everywhere: on your site’s homepage, series pages, reporter’s bio pages, within articles, etc.

If you have more questions or need a hand after reviewing this document, reach out to a Hearken engagement strategist or shoot us an email here!

Log into your Hearken Engagement Management System (EMS) and go to the Forms button (the Tt icon) in the left navigation bar.

Click the new form button near the top right corner.

Give your embed a name, then click create embed

When you create a form embed, a list is automatically generated with the same name, and the responses will automatically be assigned to that list. This becomes very useful when you are collecting responses through multiple forms at once. These automatic lists help you stay organized. You can find all the responses entered through a particular embed by navigating to the associated list rather than sifting through the main feed of responses in the responses page.

There might be a situation when you might want to change your embed to send the responses to a different or additional list. Perhaps you have two embeds with the same prompt, but designed to be embedded in different places - you can set it up so that submissions coming in through both embeds flow to the same list. Or you might have multiple embeds related to a broad topic like the environment. You could set up each embed so that they send responses to their own individual lists, but also have them both feeding into a larger thematic list for environment-themed responses. 

Use the dropdown menu to select the additional lists you want to send responses. Or you can use the "x" on the left of each label to remove the list from locations to send to.

You can update these fields at any time. 

Prompt: Your prompt is the key to success with Hearken. It's the main piece of instruction that you give to your audience about how they should engage with you. For help writing or refining your prompt, reach out to your engagement consultant (that's what they're here for!) and read through this list of tips. When you're happy with your prompt, just type it into the prompt field.

Character limit: Embeds default to a 140-character limit, which is the recommended setting when you are asking for response submissions. A shorter limit helps encourage your audience members to only ask one question per submission, and forces them to summarize their thoughts into only one or two sentences. Otherwise the burden of summarizing will fall to your staff, and that can be time-consuming. However, when you are collecting something other than questions, it can be beneficial to expand the character limit. You may also choose to not limit the response length. 

Typing effect: To help your form catch the eyes of people on your website, you may want to turn on this animation. This works best when the prompt is short.

This is where you can add text or an image to the header bar on the top of the embed. You may also choose No header. 

Headers are a great place to add more information, branding and pizzazz. As you're setting up your header and footer, you'll be able to see a live preview to the left. However, because the embeds are responsively designed, remember that it may look different when it's viewed in its final embedded location or viewed on mobile.

Text-only headers: If you want a text-only header, simply check the box next to text in the header / footer section. After typing in the text you'd like for your header, you can adjust the size of your header by dragging the font size slider to the left (smaller) or to the right (larger). 

Image headers: Check the box next to image for an image header. An upload button will appear which will allow you to upload an image from your computer to use as a header. If the image has a transparent background, the header background color will show through.  

In terms of image size, ensure that the image is large enough to display without becoming pixellated at the size you expect the embed to appear on your website. For digital display, 72 dpi is the minimum resolution you want to use. For example, if your embed will go across the full width of a 1500 px website, you'll want the image to be at 72 dpi at that size.

Footer: Many partners use the footer to either spotlight a sponsor/advertiser/underwriter, or to link to terms of service/privacy policy for your company. 

The footer text box accepts markdown, making it easier to add links and make text bold or italicized. Directions are below the text box.

To upload an image, click the upload button. 

Click the upload button. When you do so, you’ll see some options appear below the photo that let you choose if the image should go above or below any text in your footer. You can also add a link, if you want the image to be clickable.

You can customize the color of the following elements: Embed background, header background, header text, primary text (the spots like Your contact info, Email address, Please don't publish my name), secondary text (the spots like the character limit and "Powered by Hearken"), submission text (what's in the prompt box), link text, and the submit button. 

You can choose a color either by typing in a hex code or by adjusting the sliders. R-G-B stands for red, green and blue. 

Note: To find exact hex codes, you can download the Eye Dropper hex code finder extension for Google Chrome, or use this website to find hex codes from an image.

You can choose what style of font you would like for your embed. There are five options:

You can also adjust the general size of the text in your embed by sliding the slider.

You can add a custom font using the EMS's custom font settings.

Collect email: Leaving this as a required field is recommended. It's incredibly valuable to be able to follow up with your question-askers, whether it's to get clarity about their question, let them know you've answered it in the past, or even invite them along while you find the answer. However, depending on the data collection laws in your country, or if you are doing an unusual prompt, there is the option to make the email field optional or disappear altogether.

Opt-in checkbox: This feature lets your audience opt in to further communications from you (e.g. newsletters, subscription information, etc). Enter in the field below (opt-in text) what it is that you're inviting your audience to do. You can choose whether or not this checkbox should be check by default. 

Anonymous checkbox: This checkbox allows you to offer audience members' the chance to request you withhold their name from publication. When this box is checked, it tells the system to treat their name and email address in a more restrictive way. It hides their name from any public-facing list or voting round. Because of these features, we strongly recommend only ever using this checkbox in this way. If you do not want to offer the opportunity to be anonymous to your audience members, remove the feature from your form by unchecking the "Allow Anonymous Responses" checkbox.

Collect custom field: Use this field to collect additional pieces of information from your audience members. This field is commonly used to collect neighborhoods or zip codes, but you can customize it to collect any kind of information you’d like (e.g., age, gender, job title, etc.).

When you add a custom field, you need to choose if you’d like it to collect text, be a checkbox, multiple choice, or to collect postal codes.

When you select text, your audience members will see a box in which to type their response. When you select checkbox, they will see a checkbox next to the text you enter in the “Name” field.

If you select postal code, the system will use data entered there to build an interactive map on your EMS dashboard showing you which postal codes your audience members are entering along with their responses.

For multiple choice, your audience members will see a drop-down menu. Use the “Name” field to describe for yourself the kind of information you’re collecting. The *Placeholder value* field is what shows when audience members first see the embed. Below that, add the choices you’d like them to see in the drop-down menu.

Note for websites with logins: The form's Name and Email fields are blank by default. But if you have a website where users log in, and they come to a page with your form only after already having logged in, it would be convenient to have these fields already filled in. Read how to auto-populate the Form Embed Name and Email fields below.

Note on GDPR: You can use the custom fields to ensure GDPR compliance. Read more in this guide to GDPR compliance with Hearken.

In order to pre-fill user fields in a Hearken embed, you’ll need to add some JavaScript to the same page that holds the embed, and assign one or more of the default values to window.hearkenUserInfo:

Hearken embeds will scan the value of window.hearkenUserInfo, and fill in the values that they find there.

Note: You may need to consult a web developer on your team on how to obtain the correct values for the name and email fields, and to add the JavaScript to the page.

After someone sends you their response, they will be shown a message, and in that message, you can choose to include buttons they can click to share to Facebook or Twitter. We recommend you leave this feature turned on, so that your audience can encourage their friends to also submit responses. You will supply a link (usually to the landing page of your project, or another place that includes the form) and some sample text that will populate for the audience member (which they can choose to use, edit, or delete before posting to their social account). 

All of the text in your embed is customizable. This is where you could adjust the text to be in a non-English language, should your situation call for that. 

One specific field you might be likely to customize:

Submission thank-you text: This allows you to write the thank you message your audience member will see when they submit a response. This field accepts text or Markdown. You can even reference the information the asker submits, like the name, question, and email address. The main things you’ll want to communicate to your audience in the thank you response are: appreciation (so they know their participation is valued) and information about what happens to their response (so they know what to expect next). You can also invite them to use the social sharing buttons to post on social media about asking a question, or add in further calls to action (such as donate or subscribe). Learn more about customizing the submission thank you text.

You can use Markdown to add messages or buttons to your post-submission that encourage people to financially support your work. 

If you share the direct link to your embed on social media, this information will appear in social posts. (For example, if you use the direct link to your embed on Facebook, Facebook will pull this text and image as a preview.) If you plan on using the direct link, fill these two fields in: A social title (like a headline), and the social description (usually one or two short sentences). 

If you’re all set with the look and feel and submission settings for your embed, click on the show embed code button in the bottom left corner.

General: This is a standard embed code that will function just like a code you may embed for a video or other web widget.

Core Publisher / Grove: Use this embed code if you are using NPR Digital Services’ Core Publisher CMS or Grove. You will need to manipulate your embed code slightly to appear correctly on this CMS. Check out our step-by-step guide to embedding on Core Publisher.

Remember: The more visible you make your form (the more spots on your site you embed it and the more times you share the link on social media), the more responses you’ll collect. You can embed the form anywhere and everywhere: on your site’s homepage, series pages, reporter’s bio pages, within articles, etc.

Direct link: The direct link function allows you to direct your community members to a webpage that only contains the form. This can be useful for soliciting responses on social media or via email newsletters. The embed's page is mobile responsive, so the direct link is especially useful for audience members on mobile phones and tablets.

To configure your embed's direct link page, go to your platform settings. Scroll down the page to social media logo and bookmark icon. 

Social media logo: The social media logo is the image that will accompany your post when you share the direct link to your embed on Facebook. Your social media logo should be a square image file that is at least 200x200 px. The file can be .png or .jpg format, and it can be your logo or any other image that you want to associate with Hearken social posts.

Bookmark icon: This is the small icon that will appear in the browser’s tab and address bar when someone clicks on the direct link to your embed (also known as a Favicon). The specific display location varies based on which browser is being used to access the site. To add a bookmark icon, you have to link to the URL of an image hosted online elsewhere. If you have any trouble or confusion about setting this up, shoot us an email at support@wearehearken.com with your icon and we’ll set it up for you.

Note: Only .ico and .gif files are accepted and we recommend that the image dimensions be 16x16 pixels.

When you have added your Social Media Logo and Bookmark Icon, scroll down and hit save.

You can easily make a copy of a form embed to duplicate elements of its configuration for a new form embed. This feature is helpful if you want a new embed to have the same design, header, footer, after submit message, and any other elements and language you have configured.

To copy an embed, navigate to the form page in your Hearken Engagement Management System.

When you hover you cursor over a form's name, two small icons will appear on its left side. The first button allows you to make a copy. The second button allows you to archive.

Click on the make a copy button and a duplicate embed will appear. It will ask you what you'd like the name the copy. After it is created, you can change the name, prompt, or any other copied-over configuration details. 

If you have further questions around configuring a form embed, don’t be shy! Email us: support@wearehearken.com.