使用 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 // 新增一些小工具
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 與相關函式庫中，我們只要更新設定，函式庫（React、Angular、Vue）會為我們處理重新整理小工具。使用 VanillaJS 時，如範例所示，我們必須自行管理。
歡迎在下方提出任何問題，我們會盡力協助！