FastComments를 사용하면, 같은 페이지에 원하는 만큼 많은 댓글 위젯을 가질 수 있습니다. 우리는 모두 동일한 스레드로 설정하면 동기화된 상태를 유지하거나, 동시에 모두 서로 다른 스레드로 설정할 수 있습니다. 우리는 댓글 스레드를 추가하고, 제거하고, 그리고 필요에 따라 댓글 스레드를 변경할 수 있습니다.
댓글 스레드를 동적으로 추가하고 교체하기 
이 모든 것은 urlId 및 관련 매개변수를 구성하고 위젯 인스턴스에서 update()를 호출하여 다른 스레드로 교체함으로써 수행됩니다.
아래는 대화형 예제입니다(왼쪽 상단의 실행 버튼을 누르세요). 이 예제는 필요에 따라 댓글 스레드를 추가하고 교체할 수 있게 해줍니다. 또한 instance.destroy를 호출하여 update 대신 제거할 수도 있습니다.
댓글 스레드 추가 및 교체
Copy 
Run 
Run 1
2 <script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3
4 <div id="fastcomments-widgets"></div>
5 <div class="demo-form">
6 <section>
7 <h3>Add or Swap a Product/Comment Thread</h3>
8 <label>
9 Product Name
10 <input type="text" name="name" />
11 </label>
12 <label>
13 Product ID
14 <input type="text" name="id" />
15 </label>
16 <label>
17 Product URL
18 <input type="url" name="url" />
19 </label>
20 <label>
21 Replaces Product (id)
22 <input type="text" name="replaces_id" />
23 </label>
24 <button type="button">Add/Swap</button>
25 </section>
26 </div>
27 <script>
28 (function () {
29 const target = document.getElementById('fastcomments-widgets');
30 const tenantId = "demo"; // 여기에 귀하의 테넌트 ID를 넣으세요
31
32 function setHeading(heading, {name, productID}) {
33 heading.innerHTML = `${name} (${productID})`;
34 }
35
36 function addWidget({name, productID, productURL}) {
37 const outer = document.createElement('div');
38 const heading = document.createElement('h5');
39 setHeading(heading, {name, productID});
40 const inner = document.createElement('div');
41 inner.append(heading);
42 outer.append(inner);
43 const widgetTarget = document.createElement('div');
44 outer.append(widgetTarget);
45 target.append(outer);
46 window.FastCommentsUI(widgetTarget, {
47 "tenantId": tenantId,
48 "pageTitle": name, // 알림 이메일 및 검토 대시보드를 위한
49 "url": productURL, // 알림 이메일 및 검토 대시보드를 위한
50 "urlId": productID,
51 "showLiveRightAway": true
52 });
53 }
54
55 function switchProduct(oldId, {name, productID, productURL}) {
56 for (const instanceWrapped of fcUIInstances) {
57 if (instanceWrapped.targetElement) {
58 const config = instanceWrapped.config;
59 if (config.urlId === oldId) {
60 const heading = instanceWrapped.targetElement.parentNode.querySelector('h5');
61 setHeading(heading, {name, productID});
62 config.pageTitle = name;
63 config.urlId = productID;
64 config.url = productURL;
65 instanceWrapped.instance.update(config);
66 return;
67 }
68 }
69 }
70 alert(`Product ${oldId} not found to replace!`);
71 }
72
73 // add some widgets
74 addWidget({name: "Product A", productID: 'product-id-a', productURL: 'https://example.com/a'});
75 addWidget({name: "Product B", productID: 'product-id-b', productURL: 'https://example.com/b'});
76
77 const form = document.querySelector('.demo-form');
78 form.querySelector('button').addEventListener('click', function() {
79 const name = form.querySelector('input[name=name]').value;
80 const productID = form.querySelector('input[name=id]').value;
81 const productURL = form.querySelector('input[name=url]').value;
82 const replaces_id = form.querySelector('input[name=replaces_id]').value;
83
84 if (replaces_id) {
85 switchProduct(replaces_id, {
86 name,
87 productID,
88 productURL,
89 });
90 } else {
91 addWidget({name, productID, productURL});
92 }
93 });
94 })();
95 </script>
96 <style>
97 #fastcomments-widgets {
98 display: flex;
99 }
100 #fastcomments-widgets > div {
101 width: 100%;
102 }
103
104 .demo-form section label {
105 display: block;
106 margin-bottom: 20px;
107 }
108 </style>
109
이것은 페이지네이션이 작동하는 방식과 유사합니다.
React 및 관련 라이브러리를 사용할 경우 구성(configuration)을 업데이트하면 라이브러리(React, Angular, Vue)가 위젯 새로고침을 처리해 줍니다. VanillaJS에서는 아래 예제처럼 직접 관리해야 합니다.
아래에 질문을 남기시면 최선을 다해 도와드리겠습니다!