Twitch Extensions are a powerful solution for connecting streamers and viewers. But where to get started? Join us as we share some of the lessons we learned from prototyping, iterating, and publishing our Twitch Extensions.

1. Andrew McPherson
Game Developer @
Amazon Game Studios
- Building Twitch Extensions
- Is very loud

2. Building Twitch Extensions:
5 Lessons Learned

4. Play it at Booth
1811!

5. TwitchCon 2018 San Jose, California
Lessons Learned
#1. Be Responsive
#2. Be International
#3. Be Data Driven
#4. Be Reliable
#5. Be Streamer First

6. Lesson #1:
Be Responsive

10. TwitchCon 2018 San Jose, California

13. At first,
we had a separate
view for each anchor

14. TwitchCon 2018 San Jose, California
“Content is like water.
— Josh Clarck

15. TwitchCon 2018 San Jose, California
// viewer.css
.container {
display: flex;
}
@media(max-width: 640px) {
.container {
display: block;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
How to Respond
to the Screen Size

16. TwitchCon 2018 San Jose, California
// viewer.css
.container.mounted-as-component,
.container.mounted-as-video_overlay {
border-radius: 15%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
How to Respond
to the Anchor

17. TwitchCon 2018 San Jose, California
// viewer.js
let mount = "none"
if(query.platform === "mobile") {
mount = query.platform // "mobile"
} else if(query.mode !== "viewer") {
mount = query.mode // "dashboard" or "config"
} else {
mount = query.anchor // "panel" or
"video_overlay" or "component"
}
let className = `container mounted-as-${mount}`
1
2
3
4
5
6
7
8
9
10
11
12
13
How to Respond
to the Anchor

18. TwitchCon 2018 San Jose, California
Be Responsive
to All Frame
Sizes

19. Lessons Learned
Be Responsive

20. TwitchCon 2018 San Jose, California
…because Twitch is
constantly growing
and expanding

21. Lesson #2:
Be International

22. Twitch Picks is
our polling
Extension
BE INTERNATIONAL

23. TwitchCon 2018 San Jose, California
“

24. TwitchCon 2018 San Jose, California
We stream
to and from all
over the world!

25. How do users set
their language?

26. TwitchCon 2018 San Jose, California
// index.js
let query = require(“query-string”).parse(location.search)
console.log(query.language)
How to Detect the
Viewer’s Language
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

27. TwitchCon 2018 San Jose, California
Lessons Learned
Be International

29. Lesson #3:
Be Data Driven

31. TwitchCon 2018 San Jose, California

32. TwitchCon 2018 San Jose, California
Slide Title
to help you
#4. BE DATA-DRIVEN
Use Twitch Insights

36. TwitchCon 2018 San Jose, California
Step 1
DISCOVER
Step 3
ACTIVATE
Step 2
INSTALL

37. TwitchCon 2018 San Jose, California
Step2a
CONFIGURE
Step 1
DISCOVER
Step 3
ACTIVATE
Step 2
INSTALL

38. TwitchCon 2018 San Jose, California
Lessons Learned
Be Data Driven

41. TwitchCon 2018 San Jose, California
Reacting to Issues
From our Streamers

42. TwitchCon 2018 San Jose, California
You can’t improve without
knowing what to improve.
“

43. Lesson #4:
Be Reliable

44. TwitchCon 2018 San Jose, California
Deploying from
v2 to v3

45. TwitchCon 2018 San Jose, California
Deploying from
v2 to v3 (a week later)

46. Perform tests on
the API contract

47. TwitchCon 2018 San Jose, California Live Channels over Time
Know the Heartbeat
of Twitch Streams

48. TwitchCon 2018 San Jose, California
Trust is hard-earned
and easily lost.
“—Jeff Bezos

49. Lesson #5:
Be Streamer First

50. TwitchCon 2018 San Jose, California
Streamers are our customers.
“

51. Be Responsive
Be International
Be Data Driven
Be Reliable
Be Streamer First

52. Questions?

53. Follow Me!
@ehgoodenough
Visit us!
At Booth 1811