The list embed can be added to your website to display the responses you’ve received. You can make as many list embeds as you would like, and choose different groupings of responses to display in each one.

Here are some examples of ways you can group and display responses:

Whichever way you choose, the display will update automatically (unless you've enabled moderation for new responses in your Platform Settings). For example: if you already have a list embed for answered responses, and then you mark another response as “answered” on the backend, that newly answered response will automatically show up in the display.

Below is a sample list embed showing responses under investigation. Any response with a link associated with it will become hyperlinked.  

Transparency: We’re big believers in transparency. We think there’s inherent value in showing your audience how they are contributing to your journalism. Putting up a voting round is one way to do that, but that only allows you to display a small handful of responses at a time. List embeds allow you to feature more audience responses.

Inspiration: Displaying your submitted responses also allows your audience to see what other members of their community are curious about. It provides people with examples and inspiration as they come up with questions of their own. (It also helps them get over the fear of being the first kid to raise their hand.) 

Progress updates: Once your audience members have submitted their responses, they’re invested, and they often want to know what you’re doing with those responses. For that reason, many of our newsrooms like to use the list embed to show a running list of the responses they're currently working on. This allows you to keep your audience in the loop and build excitement for upcoming stories. But it can also lead to more audience participation. If people can see what responses you’re working on, they may have tips for your reporters. (Seriously, this happens!) 

Linking to finished stories: If you choose to display a list of your answered responses, you can add URLs on the backend so that each response hyperlinks to the final story. This is a great way to keep all your Hearken-powered stories organized and displayed in a single place.

Organizing responses by topic / theme: You may be using multiple different form embeds for different beats or for special series. In that case you may want to make different list embed to correspond with each form embed. For example, you might have one embed specifically for collecting questions about education. You can configure that embed to automatically send responses to an “education” list, and then display that list in a list embed.

The moderation feature allows you to review and approve submitted responses before they are visible to the public. For example, if you have configured a list embed to show the ten most recent responses, new responses will only show up in the display if they have been approved.

To enable moderation, hover you cursor over the settings button in the upper right corner of your backend site and select platform settings from the dropdown menu.

The enable moderation for new responses checkbox is the first item on that page. Check the box to enable moderation then scroll down and click save at the bottom of the page.

When moderation is enabled, a newly submitted response on your backend will have a grey and white-striped overlay and a note prompting your review and approval. 

Once you’ve approved the response, it will become publicly visible on any relevant list embed. You can also choose to delete responses that do not fit your policies or guidelines.

To create a new list embed or make changes to an existing one, navigate to the list embed tab on your Hearken backend.

Click the + new list embed button to create a new one or click on the the title of an existing display to edit it.

For a new list embed, fill in the name of your list embed in the main settings window. This is for internal use only. You can create multiple list embeds, and naming helps you keep track of the intended use or associated page for each display. (E.g., education responses, election responses, answered responses) Click the create embed button. 

Next, you'll see our WYSIWYG editor. This will look very similar to creating a form embed. You can adjust settings on the right-hand side and see those changes in live preview on the left.

This is where to select the group of responses that will be shown on the list embed.

The dropdown menu allows selection of:

Recent questions: Only the 10 most recent responses will display in your list embed. If you have moderation turned on in your platform settings, the embed will only show responses that have been approved.

Question status: You can choose to show responses which are assigned the status 'new', 'investigating', or 'answered.'

List: You can choose any list you've already created to populate your list embed with hand-picked responses.

Note: Any response with a hyperlink associated with it will be clickable in the list embed. This can be helpful if you want to showcase responses you've answered and linking to associated stories.

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. 

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 subheader text and the text of a response), response background, respondent name, and link text. 

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.

Subheader text: This is the text underneath your header, if you choose to have a header.

Attribution: Leaving this as required is recommended. It's helpful for your audience to not only see responses that are coming in, but to also see that they're coming from real people in their community. Anonymous question-askers are displayed as anonymous. Some of our partner newsrooms prefer to remove the timestamp for displaying responses. 

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 satisfied with your list embed, click the save button on the bottom right-hand side of your list embed settings. 

Next, click the show embed codes button on the bottom left-hand side of the live preview window. It'll pull up two types of embed codes and a direct link to the embed. 

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: Use this embed code if you are using NPR Digital Services’ Core Publisher CMS. 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.

Direct link: The direct link function allows you to direct your community members to a webpage that only contains the list embed. 

Our backend allows you to update the status of your response from “new,” to “investigating” or “answered.” This feature can serve two purposes. Statuses can serve an internal function, helping you keep track of the progress of responses through your production cycle. Or statuses can be public-facing through the list embed.

You can change a response's status by navigating to the Responses page on the Hearken backend and selecting the response you wish to edit.

Scroll down to where it says links and select add link.

Once you’ve updated your responses’ statuses, you can choose to display all the responses you have marked as “answered” or “investigating” (or make a separate display for each!)

When you mark a response as “answered” on the backend and add a link (as described above), that response will appear as a hyperlink in any list embed in which it is included. Learn more about response statuses. 

You may prefer to uses statuses for internal purposes only. For example, you might mark a response as “investigating” before you’re ready to announce to the public. In that case you could instead create a public facing list of all the questions you’re publicly investigating. Then to display that list, create a new list embed and select that list as the question source.

Note: You can also make a list for answered questions, rather than using the “Answered” status. But keep in mind that an answered question list won’t contain hyperlinks to the finished stories. You can only add URLs to responses via the “answered” status.

Or you may have custom statuses you want to display other than “answered” and “investigating.” For example, if you wanted to sort and display all of the responses that you’ve classified as unanswerable, you can create a list called “unanswerable questions ” and add whatever response you want to it. Then configure a new list embed and select the “unanswerable questions” list as the source. Learn more about lists. 

Questions about list embeds? Message us using Intercom or email us: support@wearehearken.com