Engagement cards are used throughout your site to prompt your users to take action. On the surface, engagement cards are a headline, a short sentence of text, an image, and a clickable button. But behind the scenes, you can use the engagement card system to make sure your users always see contextually relevant calls to action.
For example, let's say your conservation work is centered around three priority projects. You could create an engagement card with a specific call to action customized for each project, and then use the engagement card system to make sure any page or article on your site referencing those projects gets the proper engagement card. That way, your users can read about your work and see a relevant call to action.
All three of these custom engagement cards could link to your one main donation page, but the added context your users will see before they click will help make the engagement more meaningful.
To create an engagement card
- Go to Content -> Create Content -> Engagement Cards in your admin menubar.
- On the "Main content" screen, fill in the Engagement card's title and subtitle, and give it an image. Note: each has a maximum length; if you get a message saying you've exceeded that length, try shortening it.
- Also fill in the Link title and URL for this card (for the orange button). This is where your users will be taken when they click this card.
- Now, on the References screen, add some additional information about this card. Is this call to action specific to one of your site's categories (ie, is this a card customized to engage readers around one of your priority projects, for which you already have a site category?). If so, fill it in.
- Is this engagement card specific to any bird species? If so, fill those in under "Birds"
- Make sure your engagement card is set to Published on the "Publishing options" tab
- Once your card is fully populated, press save.
Getting your engagement card to appear on the page
Now, if you associated your engagement card with a site category or specific bird, it will start appearing in the sidebar engagement card slot of any article or static page in that same category, or for any article that references that specific bird in the "birds in this story" section. You don't have to to anything else. Pretty cool!
To control which cards appear on your pages if the system doesn't find a category or bird match, you will use the Engagement Cards nodequeue (found under Content -> Engagement cards nodequeue in your admin toolbar):
As you can see, the cards in the blue and red sections of the Engagement cards nodequeue page dictate what cards show up on your pages by default. But if the system finds a match based on a Category assignment or a Bird reference, it will override the default and place the more contextually relevant card on the page. These matches only appear in the sidebar positions on static pages; the footer remains default.
Individual page placement
The system also allows you to place specific engagement cards manually on any of your pages. You can do this by editing the page you want to customize, then editing the engagement card panel and typing in the name of the card you want to appear. To return to the system defaults, just delete the card name from the field (see also: To Edit An Existing Landing Page)
In some cases, you can also add engagement cards to certain regions of pages that don't yet have them. Again, more info on how to do this can be found here: To Edit An Existing Landing Page
Full-width engagement cards
You can now add Engagement cards to a region that spans the full width of the page. To do this, create an engagement card as usual following the guidelines above, making sure the image you select is wide and at a higher resolution. Then:
- On the landing page you'd like to add the full-width engagement card, switch to "Customize this page" view and click the plus sign in the blue page region heading
- Choose the "Basic modules" category at left, then select "Engagement card - full width"
- You can choose one of two layouts: "Half Black" will create a black background for the engagement card text, with the image at left (use a more square-shaped image). "Default" will place the image behind the text (not all images will work well behind text—make sure your text is legible).
- Type the name of the engagement card you'd like to add, and press "Finish"
These engagement card placements work especially well with cards set up to capture email addresses. They can be placed on campaign landing pages to add more calls to action to your pages.