Quick Start Guide

This guide will walk you through embedding your first privacy-preserving tweet using Embetty. This assumes you have already completed the steps in the Installation guide.

Embedding a Tweet

Embedding content with Embetty is done using custom HTML tags. Let's embed a tweet.

  1. Find the Tweet ID: The ID is the long number at the end of a tweet's URL. For example, in https://twitter.com/user/status/1166685910030790662, the ID is 1166685910030790662.

  2. Add the HTML: Place the <embetty-tweet> tag in your HTML where you want the tweet to appear, and set the status attribute to the tweet's ID.

Here is a complete HTML example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Embetty Quick Start</title>

  <!-- 1. Configure the URL of your Embetty server -->
  <meta data-embetty-server="https://your-embetty-server.com">

  <!-- 2. Include the Embetty frontend script -->
  <script async src="/path/to/embetty.js"></script>
</head>
<body>

  <h1>My First Embetty Embed</h1>

  <!-- 3. Add the custom tag for the tweet -->
  <embetty-tweet status="1166685910030790662"></embetty-tweet>

</body>
</html>

What Happens Next?

  1. When the page loads, the embetty.js script defines the <embetty-tweet> custom element.
  2. The component reads the server URL from the <meta> tag.
  3. It makes a request to your Embetty server (e.g., https://your-embetty-server.com/tweet/1166685910030790662).
  4. Your server fetches the tweet data from the Twitter API, caches it, and returns it to the component.
  5. The <embetty-tweet> component renders a privacy-friendly preview of the tweet using the fetched data.
  6. When a user clicks on the preview, the component replaces itself with the official, interactive Twitter embed iframe.

That's it! You've successfully embedded content without sending any user data to Twitter on page load.

To learn how to embed other types of content, see the Components section in the menu.