HTML Card Examples - LinkedIn

Introduction

In the Concierge Visual Editor, users are able to create custom content for their concierge using the HTML card.  There are many use cases, and this talks about just one.

Before you get started, you'll need:

  • A Concierge, with "Allow Javascript in Capacity response" enabled in its Settings under the "Other" tab
  • A public LinkedIn post to use.  It can be yours or a different account.
  • A site to test the concierge.  It can be a Capacity site, but you can't test in the console.

How To Create the HTML Card

First, navigate to the Concierge 2.0 Visual Editor, in Settings > Concierges -> [Your Concierge] -> Concierge 2.0.  If you don't see Settings in the Capacity web console, you'll need your organization's administrator to help.

Find the area you want to add the content, then click the plus button in the visual editor and select "HTML card".

Next, click the plus button that appears (not the one below the card)  and add a section for HTML code.

You're now ready to embed LinkedIn content!  

Navigate to LinkedIn, then to the post you want to embed.  Then click the More icon and Embed this post, as shown below.


Then, you'll be given HTML code for embedding the post.  Click Copy code.

After you have the code copied, navigate back to the Capacity console, and paste it inside your HTML Card's HTML code field.  Then, be sure to save your concierge. Finally, view it somewhere outside the console to validate that it's functioning properly.  A Capacity Site works.  

Oops!  The post's content will likely be wider than the concierge window, because LinkedIn by default doesn't 

To fix this, go back to your HTML code, and remove the attribute for width.

width="504"


When you've done that, save the concierge, navigate to the site with it live, refresh your browser, and look again.

Much better!  If the card is too long or too short, simply change the height attribute in the code.

That's it!  You can experiment with more HTML to make it even more interesting.  And with the Visual Editor, keeping your post up to date is easy!

Was this article helpful?