Our embeds allow you to use Markdown -- a lightweight markup language that lets you style text on the web -- to customize footers and post-submission / post-voting messages. You can use Markdown to format text, or to incorporate images, links and linked images.
Linked images makes it possible to drop in a button that could take users to a subscription or donation page, so they can directly support your work. This is an advanced help doc that requires some understanding of Markdown. If you feel comfortable with tackling this step, proceed with the instructions.
If you don't (but would like to give this a shot), people in your organization who could likely help you would be: someone on your web development team and someone on your membership, donation, or subscription teams.
Find your button (or create an image)
If you use a third-party service for subscriptions, donations or member sign-ups, see if that service generates a button you can use that would take people directly to the page where they can contribute. (Steady and Paypal are two that we have tested.)
If you don’t use a third-party service or if your service doesn't generate a button, work with your internal design team to craft a button that you can use as a linked image. Make sure the image is hosted online somewhere that is findable, and then add in the appropriate reference link to your subscription, membership or donation page.
Insert your assets into Markdown
To add in a linked image, you’ll want to use this markdown styling:
All brackets and parentheses are necessary.
Markdown styling explained
The exclamation point indicates an image is coming.
The “optional alt text for the image” section is where you can place text that would describe the image.
The “IMAGE URL” phrase within the parentheses within the [ ] tells the system where to go to grab the image you’d like to use. This is where your URL image will go.
The link in the parentheses outside the [ ] “THE REFERENCE URL” tells the system to what URL the image should link. This should be a link to your donate or subscribe page.
If you're nervous, test it with some dummy images
As an example, test out this gif of a curious cat that links to the Hearken homepage. To test it, visit https://dillinger.io/, and copy the below code into the left side panel, then review what appears in the right. You can use dillinger.io to test your own button system as well, replacing the alt text and URLs with the things you’d want to use on your site.
A note about third-party services that create buttons: Some services will create buttons for you, but they may show up in different formats, depending on the system. For example, one may use an embed code with Javascript, or another may spit out HTML. That can make it easier (or more difficult) to figure out which parts you need to include in the Markdown step. That's why we recommend you consult with your business and web developer colleagues to get help with this step.
Paste your Markdown code into the footer
When you’re happy with it, copy that code into the editor of the appropriate embed’s post-submission or post-voting message, and you should then see the button appear in the display view.
Save it, and you will have an embed ready to help you connect curiosity to revenue generation.
Here’s how a payment button looks in a post-submission view on a form embed:
Troubleshooting
These are a few common issues you may run into:
The image is not loading. Copy the image URL and paste it into a new browser window to make sure the image address is correct.
The image loads, but does not function as a link. Make sure your markdown code is correct, with all required brackets and parentheses.
The link doesn’t go where I think it should go. Copy the reference URL and paste it into a new browser to make sure you’ve got the right address.
The button doesn’t load in my embed on my website. Make sure you saved your changes and that they appear in the preview display.
If you need additional help, click the link at the top of this page to contact an engagement strategist for help.