FastComments.com

Add Live Commenting to Framer Sites


FastComments๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด Framer๋กœ ์ œ์ž‘๋œ ๋ชจ๋“  ์‚ฌ์ดํŠธ์— ์‹ค์‹œ๊ฐ„ ๋Œ“๊ธ€ ๊ธฐ๋Šฅ์„ ์‰ฝ๊ฒŒ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ํŠœํ† ๋ฆฌ์–ผ์—์„œ๋Š” Live Commenting ์œ„์ ฏ ์„ค์น˜๋งŒ ๋‹ค๋ฃน๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์œ„์ ฏ ์„ค์น˜ ๋˜๋Š” SSO ์„ค์ •์— ๋„์›€์ด ํ•„์š”ํ•˜์‹œ๋ฉด, ์–ธ์ œ๋“ ์ง€ ์ง€์› ํ‹ฐ์ผ“์„ ์ƒ์„ฑํ•ด ์ฃผ์„ธ์š”.


1๋‹จ๊ณ„: ์—๋””ํ„ฐ ์—ด๊ธฐ Internal Link


๋จผ์ € ์‚ฌ์ดํŠธ์˜ ์—๋””ํ„ฐ๋ฅผ ์—ฝ๋‹ˆ๋‹ค.

์ด ์˜ˆ์—์„œ๋Š” FastComments๋ฅผ ๋ธ”๋กœ๊ทธ ํŽ˜์ด์ง€์— ์ถ”๊ฐ€ํ•  ๊ฒƒ์ด์ง€๋งŒ, ์–ด๋–ค ์œ ํ˜•์˜ ํŽ˜์ด์ง€์—์„œ๋„ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

์—๋””ํ„ฐ ์—ด๊ธฐ
์—๋””ํ„ฐ ์—ด๊ธฐ

2๋‹จ๊ณ„: ์ž„๋ฒ ๋“œ ๋ธ”๋ก ์ถ”๊ฐ€ Internal Link

์ด์ œ Embed ๋ธ”๋ก์„ ์ถ”๊ฐ€ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์™ผ์ชฝ ์ƒ๋‹จ์—์„œ Insert๋กœ ์ด๋™ํ•˜์„ธ์š”:

Insert ํด๋ฆญ
Insert ํด๋ฆญ

๊ทธ๋Ÿฐ ๋‹ค์Œ ์™ผ์ชฝ ์‚ฌ์ด๋“œ๋ฐ”๋ฅผ ์•„๋ž˜๋กœ ์Šคํฌ๋กคํ•˜๊ณ  Utility ์œ„์— ๋งˆ์šฐ์Šค๋ฅผ ์˜ฌ๋ฆฌ์„ธ์š”.

๋‹ค์Œ์œผ๋กœ ๋ธ”๋กœ๊ทธ ๋ ๋ถ€๋ถ„์— Embed ๋ธ”๋ก์„ ํด๋ฆญํ•˜๊ณ  ๋“œ๋ž˜๊ทธํ•˜์„ธ์š”.

์ค‘์š”ํ•œ ๊ฒƒ์€ ๋ณด์—ฌ์ง„ ๊ฒƒ์ฒ˜๋Ÿผ ํด๋ฆญํ•˜๊ณ  ๋“œ๋ž˜๊ทธํ•˜๋Š” ๊ฒƒ์ด๋ฉฐ, ๊ทธ๋ƒฅ ํด๋ฆญ๋งŒ ํ•˜๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ƒฅ ํด๋ฆญํ•˜๋ฉด Framer๊ฐ€ ๋ธ”๋กœ๊ทธ ๋ฐ–์— ์‚ฝ์ž…ํ•˜์—ฌ ๋‚˜์ค‘์— ๋‹ค์‹œ ๋Œ์–ด๋‹ค ๋†“์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Embed ์œ„์ ฏ ์ฐพ๊ธฐ
Embed ์œ„์ ฏ ์ฐพ๊ธฐ
Embed ์œ„์ ฏ ๋Œ์–ด๋‹ค ๋†“๊ธฐ
Embed ์œ„์ ฏ ๋Œ์–ด๋‹ค ๋†“๊ธฐ

์ด์ œ ๋นˆ Embed ์œ„์ ฏ์ด ์ƒ๊ธฐ๊ณ , ์„ ํƒํ•˜๋ฉด ์˜ค๋ฅธ์ชฝ์— ์‚ฌ์ด๋“œ๋ฐ”๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ์‚ฌ์ด๋“œ๋ฐ”๋ฅผ ํ™•์žฅํ•˜๋ฉด ๋‹ค์Œ๊ณผ ์œ ์‚ฌํ•œ ํ™”๋ฉด์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค:

Embed ์„ค์ • ์—ด๊ธฐ
Embed ์„ค์ • ์—ด๊ธฐ

์ด์ œ Embed ์œ„์ ฏ ์œ ํ˜•์„ HTML๋กœ ๋ณ€๊ฒฝํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค:

HTML ์œ„์ ฏ์œผ๋กœ ์„ค์ •
HTML ์œ„์ ฏ์œผ๋กœ ์„ค์ •

์ด์ œ ๋‹ค์Œ ๋‹จ๊ณ„์˜ FastComments Framer ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์„ ์ ์šฉํ•  ์ค€๋น„๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.


3๋‹จ๊ณ„: Framer ์ „์šฉ FastComments ์ฝ”๋“œ ๋ณต์‚ฌํ•˜์—ฌ ๋ถ™์—ฌ๋„ฃ๊ธฐ Internal Link

์•„๋ž˜๋Š” Framer์šฉ Live Comments FastComments ์Šค๋‹ˆํŽซ์ž…๋‹ˆ๋‹ค.

FastComments Framer ์ „์šฉ ๋Œ“๊ธ€ ์Šค๋‹ˆํŽซ
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>
4<script>
5 (function fcLoad() {
6 function tryLoad() {
7 // ์ผ๋ถ€ ์ œ๊ณต์—…์ฒด๋Š” ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์„ ๋น„๋™๊ธฐ(async)๋กœ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค
8 const container = document.getElementById('fastcomments-widget');
9 if (!container) {
10 return waitRetry();
11 }
12 if (!window.FastCommentsUI) {
13 return waitRetry();
14 }
15 if (container.fastCommentsSetup) {
16 return;
17 }
18 window.FastCommentsUI(container, {
19 tenantId: 'demo',
20 pageTitle: top.document.title,
21 url: top.location.href,
22 urlId: top.location.pathname
23 });
24 container.fastCommentsSetup = true;
25 }
26 function waitRetry() {
27 setTimeout(tryLoad, 500);
28 }
29 tryLoad();
30 })();
31</script>
32

๋˜๋Š”, ๋Œ€์•ˆ์œผ๋กœ ์ŠคํŠธ๋ฆฌ๋ฐ ์ฑ„ํŒ… ์œ„์ ฏ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Framer์šฉ Streaming Chat FastComments ์Šค๋‹ˆํŽซ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:

FastComments Framer ์ „์šฉ ์ŠคํŠธ๋ฆฌ๋ฐ ์ฑ„ํŒ… ์Šค๋‹ˆํŽซ
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-live-chat.min.js"></script>
3<div id="fastcomments-live-chat-widget" style="width: 100%;height: 100%;"></div>
4<script>
5 (function fcLoad() {
6
7 function tryLoad() {
8 // ์ผ๋ถ€ ์ œ๊ณต์—…์ฒด๋Š” ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์„ ๋น„๋™๊ธฐ(async)๋กœ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค
9 const container = document.getElementById('fastcomments-live-chat-widget');
10 if (!container) {
11 return waitRetry();
12 }
13 if (!window.FastCommentsLiveChat) {
14 return waitRetry();
15 }
16 if (container.fastCommentsSetup) {
17 return;
18 }
19 window.FastCommentsLiveChat(container, {
20 tenantId: 'demo',
21 pageTitle: top.document.title,
22 url: top.location.href,
23 urlId: top.location.pathname
24 });
25 container.fastCommentsSetup = true;
26 }
27 function waitRetry() {
28 setTimeout(tryLoad, 500);
29 }
30 tryLoad();
31 })();
32</script>
33

FastComments๋Š” Framer ์—๋””ํ„ฐ๋ฅผ ์ง€์›ํ•˜๋ฏ€๋กœ ์ฝ”๋“œ๋ฅผ ๋ถ™์—ฌ๋„ฃ์œผ๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ™”๋ฉด์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค( Publish๋ฅผ ํด๋ฆญํ•ด์•ผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค):

๋Œ“๊ธ€ ์œ„์ ฏ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
๋Œ“๊ธ€ ์œ„์ ฏ ๋ฏธ๋ฆฌ๋ณด๊ธฐ

์ด์ œ ์‚ฌ์ดํŠธ๋ฅผ ์—ด๋ฉด ๋Œ“๊ธ€ ์˜์—ญ์ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค! ์›ํ•˜๋Š” ๊ฒฝ์šฐ Framer์˜ ์‚ฌ์ด๋“œ๋ฐ”์—์„œ ์œ„์ ฏ์„ ์ „์ฒด ๋„ˆ๋น„๋กœ ์„ค์ •ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฐธ๊ณ ๋กœ Framer๋Š” ์œ„์ ฏ์˜ ๋†’์ด๋ฅผ ์ œํ•œํ•˜๊ณ  ์ž๋™ ํฌ๊ธฐ ์กฐ์ •์„ ์ง€์›ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์—ฌ๊ธฐ์„œ๋Š” ๊ณ ์ • ๋†’์ด์ธ Live Chat ์œ„์ ฏ์„ ์„ ํƒํ–ˆ์Šต๋‹ˆ๋‹ค.

4๋‹จ๊ณ„: ์œ„์ ฏ ๋ฐ ํŽ˜์ด์ง€ ๋†’์ด ์กฐ์ • Internal Link

๋‘ ๊ฐ€์ง€ ์ž‘์—…์œผ๋กœ ์œ„์ ฏ์˜ ์œ„์น˜๋ฅผ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

First, on the left pane, set the widget's height to fill and 1fr:

๋Œ“๊ธ€ ์œ„์ ฏ ๋†’์ด
๋Œ“๊ธ€ ์œ„์ ฏ ๋†’์ด

Next we need to fix the default Framer page config. By default it sets the page height to a fixed size, which can cut off comment threads. So let's set this to fill, too.

ํŽ˜์ด์ง€ ๋†’์ด ์„ค์ •
ํŽ˜์ด์ง€ ๋†’์ด ์„ค์ •

์›ํ•˜๋Š” ๋Œ€๋กœ ๋˜๋„๋ก ํŽ˜์ด์ง€ ๋†’์ด๋ฅผ ์กฐ์ •ํ•ด์•ผ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๋งž์ถค ์„ค์ • Internal Link


FastComments๋Š” ๊ท€ํ•˜์˜ ์‚ฌ์ดํŠธ์— ๋งž๊ฒŒ ๋งž์ถคํ™”๋˜๋„๋ก ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋งž์ถค ์Šคํƒ€์ผ์„ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ๊ตฌ์„ฑ์„ ์กฐ์ •ํ•˜๋ ค๋ฉด ๋งž์ถคํ™” ๋ฌธ์„œ ํ™•์ธํ•˜๊ธฐ์—์„œ ๋ฐฉ๋ฒ•์„ ํ™•์ธํ•˜์„ธ์š”.