Implement WebRTC really fast

Set up your first video or chat room in 5 minutes

play_circle_outline
Create your first project

Sign up and create an account for you or your organization, then create your first project. This will give you an API key, which you use on your website or in your app. You may need to verify your domain.

Create Project
<html>
  <head>
    <script src="https://video.attach.live/v1" defer></script>
    <meta property="attach:site-verification" content="{your-code-here}">
    <meta property="attach:api-key" content="{your-key-here}">
  </head>
</html>
person_pin
Inject your current user

Add your currently signed-in user and tell us if you like your avatars displayed round square. You can leave this step out if you want us to generate a guest avatar.

<html>
  <head>
    <meta property="attach:user:username" content="{username}">
    <meta property="attach:user:avatar" content="{avatar-url}">
    <meta property="attach:participants:avatar-border-radius" content="round">
  </head>
<html>
meeting_room
Join a public or private room

Use a web URL or an opaque identifier to identify a room. Decide if users from any website or app can join in, if users can share to bring others, or run your very secret private rooms.

<html>
  <head>
    <meta property="attach:room:provider" content="twitter">
    <meta property="attach:room:type" content="hashtag">
    <meta property="attach:room:identifier" content="helloattach">
  </head>
</html>
color_lens
Place and style your embeds

Style embeds with meta tags, then create a <div> to place the embed.

<html>
  <head>
    <meta property="attach:provider:identity-color" content="#92278F">
    <meta property="attach:videocall:background-color" content="#000000">
    <meta property="attach:videocall:local-background-color" content="#440000">
    <meta property="attach:videocall:remote-background-color" content="#000044">
  </head>
  <body>
    <div class="attach-videocall"></div>
  </body>
</html>

Use the `.attach-videocall` selector in CSS to position the embed on the page. The embed will only show up when it is large enough.

.attach-videocall {
    width: 90vw;
    height: 90vh;
}
Play on CodePen
codepen
elephant with timer

We use functional cookies according to our cookie policy. To consent for cookies to be used, click accept.

close