Embedding on Core Publisher or Grove

Core Publisher and Grove can present some challenges to embedding third-party code. This guide walks you through ways to work within your CMS to get Hearken to work in your stories and on your home page.

Grove

If you are experiencing issues with your website not rendering your embeds or rendering them improperly, we suggest using the Core Publisher / Grove embed code instead of the regular embed code:

We have not been able to identify any incompatibility between Grove and the regular embed code, but have found that the Grove embed code sometimes fixes rendering issues our Grove partners have.

Core Publisher

Core Publisher doesn't currently have a standard block for embedding HTML, such as the Hearken form embed, on their home page. However, after talking to some stations and NPR Digital Services, we've found a way to do it!

Here’s an example from KUOW in Seattle, Washington.

Use a Promotional Image instead

In the back end of Core Publisher, click on configure Core Publisher from the menu. On the left-hand side, click on add block from the Block Factory.

Select promotional block as your block type.

Next, select the large image promo treatment.

You'll need to use your logo as the image and split the embed code between the "heading" and "subheading" fields.

A typical embed code looks like the following, all mushed up together:

For the large promotional image block, due to length restrictions, we'll need to break this into two parts and make a small change.

What we want to do is take the <p> tag and put it into the "subheading" field. Notice that we need to swap the " " for "_" (an underscore).

And the <script> tag will go into the "Heading" field. Notice that we need to swap the pym.min.js for p.m.js to satisfy the length restrictions.

This will bring the embed to life. However, when you do this, you'll notice a large white border around the embed, which makes it look like skinny legs in pants that are too large. We're determined to get you a perfect fit.

Too Much Border

Perfect Fit

Make a small adjustment to the embed code

In KUOW's case, the original code that went into the "subheading" field look like this:

This embed code should look very similar to the one on your organization's configure form embed page. You can copy your embed code from that page into a document or into Core Publishers backend to make these small edits:

In order to get rid of the white border, expand the width and height of the embed. You can do this by adding a style attribute to your embed code: style="margin: -50px -25px -10px -25px"

Insert that attribute between <p id='hh3xl' and data-pym-src=`// . Usually your embed code has a class='curiosity-module' between those two sections, but we'll need to delete that due to the length limitations of Core Publisher.

These numbers, -50px -25px -10px -25px look a bit strange, but they really represent the size that we are stretching the embed in each direction. Notice the negative sign, that indicates that we are stretching outward.

The numbers are interpreted left to right:

-50px = stretch the top upwards by 50 pixels
-25px = stretch the right of the embed by 25 pixels
-10px = stretch the bottom of the embed by 10 pixels
-25px = stretch the left of the embed by 25 pixels

These numbers should work for your site, but they might not. If they don't work, feel free to adjust them to make it fit just like you want it.

Using our embeds within stories

Luckily, it's easier to use our embeds within Core Publisher posts. When you create a new post, click on the source button above the story body.

Paste your embed where you would like it to go. When you hit the preview button, the embed should show up like it's supposed to!

As always, we’re here for you! Don’t be shy if you’re wrestling with it. Reach out to usand we can hop on a call and screenshare to get it looking slick!