HTML Card Examples - Twitter
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 Twitter feed or single Tweet to use. It can be yours or a different (public) account.
- A site to test the concierge. It can be a Capacity site, but you can't test in the console.
This article has three guides: how to embed a Twitter feed, how to embed a single Tweet, and how to embed a Twitter button.
Decide which Twitter account to connect to. For these examples, we'll use content from Capacity's handle, @gocapacity.
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 Twitter content! There are three tutorials below, so continue to the one that you want to follow.
How To Embed a Feed
If you'd like to embed a living, breathing Twitter feed, it's easy!
In the HTML code text field that appeared, paste the code found at this link:
You'll likely want to change three values:
- After "twitter.com/", add the handle for the feed you'd like to show
- After "data-tweet-limit", add the number of Tweets you'd like to show. It's recommended that this number is less than 5.
- Before the closing tag "", add a title. Possibly "Tweets by" and the Twitter handle. This is the title of the feed.
Be sure to save your concierge. Then, view it somewhere outside the console for an accurate view. A Capacity Site works.
That's it! See an example of the feed below.
How To Embed a Single Tweet
If your concierge users will be overwhelmed by a full feed, and you want them to just focus on a single post, consider this customization.
For this tutorial, you'll need to get the URL for your single Tweet. This is available by viewing the Tweet in a browser, and clicking the date next to the Tweet. In this case, we'll use a Capacity one from April 11th.
Copying the URL
Doing this should lead you to a URL like https://twitter.com/GoCapacity/status/1645805692140539907. Copy it.
Using the Publishing Tool
Once you have that, navigate to Twitter's official publishing tool. Scroll down and pick "Embedded Tweet".
Embedding
You'll see a popup. Add the URL you copied earlier, and click Preview.
You'll see the HTML that you need. Click "Copy Code".
Adding to the Concierge
Next, navigate back to the Capacity console, and paste that code 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. This is what it should look like, complete with buttons for liking, replying, copying a link, and reading more!
How to Embed a Twitter button
In a new tab, navigate to Twitter's official publishing tool. Paste in a Twitter account and click the arrow.
You'll see options for Follow or Mention buttons.
After selecting your button, you'll see the code. Copy it.
Then, navigate back to your concierge's settings, and paste your code into the HTML card in the HTML code section.
Be sure to save your concierge. Then, view it somewhere outside the console for an accurate view. A Capacity Site works.
That's it! See an example of the button below. The button and card can be styled even more with additional code.