👷🏼‍♀️

TikTok Live API is very experimental and can break at any time. Please set your expectations accordingly.

Make Interactive TikTok Live Games

Playroom lets you make interactive games for TikTok Live. Live stream viewers can interact with these games using likes, comments and gifts. This style of interactive experiences are highly engaging and provide high audience growth.

How it works

When this mode is enabled, Playroom will ask for your TikTok username at the start. Playroom will then wait for you to go live on TikTok.

When you go live on TikTok using "Mobile Gaming" mode so that your screen is shared with your viewers. Playroom will automatically start the game, begin listening to events from your live stream and send them to your game. Your game can then use these events to respond to viewer interactions.

Cards Demo (Enter "test" as username)

Here's a very simple interactive demo that shows viewer likes, comments and gifts as cards on the screen along with viewer usernames and profile photos. See code for this demo below.

Steps for Creating a TikTok Live Game

1. Enable `liveMode` in your game

When calling insertCoin, pass liveMode: "tiktok" to enable TikTok Live mode.

await insertCoin({
  liveMode: "tiktok"
})

This promise will resolve when the connection to your TikTok Live stream is established.

2. Listen to `onTikTokLiveEvent` to listen to TikTok Live events

onTikTokLiveEvent((event) => {
  console.log("TikTok Live Event", event);
});

Refer to TikTokLiveEvent for the list of events and their payloads.

Code for the Cards Demo

Note the highlighted parts which initiate the connection and then listen for TikTok events.

See the full code here (opens in a new tab).

const { useEffect, useState } = React;
const {
  insertCoin, 
  onTikTokLiveEvent
} = Playroom;
const randomNumBetween = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
const randomRotations = Array(20).fill(0).map(()=> `rotate(${randomNumBetween(-5,5)}deg) translateX(${randomNumBetween(-10,10)}px)`);
 
const App = () => {
  const [cards, setCards] = useState([]);
 
  function addCard(type, username, photo, comment){
    setCards(cards=>[...cards, {type, username, photo, comment}]);
  };
 
  useEffect(async ()=>{
    await insertCoin({ liveMode: "tiktok" });
    onTikTokLiveEvent((event) => {
      console.log("tiktok live event", event);
      addCard(event.type, "@" + event.data.username, event.data.userPhotoUrl, event.data.comment)
    });
  }, []);
  
  return (
    <div className="App">
      {cards.map((emojiData, i)=>{
        return (
        <div key={i} className="emoji-display">
          <span 
            style={{transform: randomRotations[i%randomRotations.length]}}
            className={"card " + emojiData.type}>
            <span className="avatar">
              <img src={emojiData.photo} />
              {emojiData.username}
            </span>
            {emojiData.type==="like" && <span className="like">❤️</span>}
            {emojiData.type==="gift" && <span className="gift">🎁</span>}
            {emojiData.type==="chat" && <span className="chat">💬</span>}
            {emojiData.type==="chat" && <span className="comment-text">"{emojiData.comment}"</span>}
          </span>
        </div>
      )})
      }
    </div>
  );
};
 
const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

Bots Discord