diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index f537ac8..4017ccd 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -1,5 +1,5 @@
-import {themes as prismThemes} from 'prism-react-renderer';
-import type {Config} from '@docusaurus/types';
+import { themes as prismThemes } from 'prism-react-renderer';
+import type { Config } from '@docusaurus/types';
const config: Config = {
title: 'Copper App SDK',
@@ -18,7 +18,7 @@ const config: Config = {
i18n: {
defaultLocale: 'en',
- locales: ['en'],
+ locales: ['en', 'zh-Hant'],
},
themes: ['classic'],
@@ -38,6 +38,10 @@ const config: Config = {
navbar: {
title: 'Copper App SDK',
items: [
+ {
+ type: 'localeDropdown',
+ position: 'right',
+ },
{
label: 'Copper',
href: 'https://copper.com',
diff --git a/i18n/zh-Hant/code.json b/i18n/zh-Hant/code.json
new file mode 100644
index 0000000..ed0b272
--- /dev/null
+++ b/i18n/zh-Hant/code.json
@@ -0,0 +1,289 @@
+{
+ "theme.ErrorPageContent.title": {
+ "message": "此頁已當機。",
+ "description": "The title of the fallback page when the page crashed"
+ },
+ "theme.blog.archive.title": {
+ "message": "歷史文章",
+ "description": "The page & hero title of the blog archive page"
+ },
+ "theme.blog.archive.description": {
+ "message": "歷史文章",
+ "description": "The page & hero description of the blog archive page"
+ },
+ "theme.BackToTopButton.buttonAriaLabel": {
+ "message": "回到頂部",
+ "description": "The ARIA label for the back to top button"
+ },
+ "theme.blog.paginator.navAriaLabel": {
+ "message": "部落格文章列表分頁導覽",
+ "description": "The ARIA label for the blog pagination"
+ },
+ "theme.blog.paginator.newerEntries": {
+ "message": "較新的文章",
+ "description": "The label used to navigate to the newer blog posts page (previous page)"
+ },
+ "theme.blog.paginator.olderEntries": {
+ "message": "較舊的文章",
+ "description": "The label used to navigate to the older blog posts page (next page)"
+ },
+ "theme.blog.post.paginator.navAriaLabel": {
+ "message": "部落格文章分頁導覽",
+ "description": "The ARIA label for the blog posts pagination"
+ },
+ "theme.blog.post.paginator.newerPost": {
+ "message": "較新一篇",
+ "description": "The blog post button label to navigate to the newer/previous post"
+ },
+ "theme.blog.post.paginator.olderPost": {
+ "message": "較舊一篇",
+ "description": "The blog post button label to navigate to the older/next post"
+ },
+ "theme.blog.post.plurals": {
+ "message": "{count} 篇文章",
+ "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+ },
+ "theme.blog.tagTitle": {
+ "message": "{nPosts} 含有標籤「{tagName}」",
+ "description": "The title of the page for a blog tag"
+ },
+ "theme.tags.tagsPageLink": {
+ "message": "檢視所有標籤",
+ "description": "The label of the link targeting the tag list page"
+ },
+ "theme.colorToggle.ariaLabel": {
+ "message": "切換淺色/暗黑模式（當前為{mode}）",
+ "description": "The ARIA label for the navbar color mode toggle"
+ },
+ "theme.colorToggle.ariaLabel.mode.dark": {
+ "message": "暗黑模式",
+ "description": "The name for the dark color mode"
+ },
+ "theme.colorToggle.ariaLabel.mode.light": {
+ "message": "淺色模式",
+ "description": "The name for the light color mode"
+ },
+ "theme.docs.breadcrumbs.navAriaLabel": {
+ "message": "頁面路徑",
+ "description": "The ARIA label for the breadcrumbs"
+ },
+ "theme.docs.DocCard.categoryDescription.plurals": {
+ "message": "{count} 個項目",
+ "description": "The default description for a category card in the generated index about how many items this category includes"
+ },
+ "theme.docs.paginator.navAriaLabel": {
+ "message": "文件選項卡",
+ "description": "The ARIA label for the docs pagination"
+ },
+ "theme.docs.paginator.previous": {
+ "message": "上一頁",
+ "description": "The label used to navigate to the previous doc"
+ },
+ "theme.docs.paginator.next": {
+ "message": "下一頁",
+ "description": "The label used to navigate to the next doc"
+ },
+ "theme.docs.tagDocListPageTitle.nDocsTagged": {
+ "message": "{count} 篇文件帶有標籤",
+ "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+ },
+ "theme.docs.tagDocListPageTitle": {
+ "message": "{nDocsTagged}「{tagName}」",
+ "description": "The title of the page for a docs tag"
+ },
+ "theme.docs.versionBadge.label": {
+ "message": "版本：{versionLabel}"
+ },
+ "theme.docs.versions.unreleasedVersionLabel": {
+ "message": "此為 {siteTitle} {versionLabel} 版尚未發行的文件。",
+ "description": "The label used to tell the user that he's browsing an unreleased doc version"
+ },
+ "theme.docs.versions.unmaintainedVersionLabel": {
+ "message": "此為 {siteTitle} {versionLabel} 版的文件，現已不再積極維護。",
+ "description": "The label used to tell the user that he's browsing an unmaintained doc version"
+ },
+ "theme.docs.versions.latestVersionSuggestionLabel": {
+ "message": "最新的文件請參閱 {latestVersionLink} ({versionLabel})。",
+ "description": "The label used to tell the user to check the latest version"
+ },
+ "theme.docs.versions.latestVersionLinkLabel": {
+ "message": "最新版本",
+ "description": "The label used for the latest version suggestion link label"
+ },
+ "theme.common.editThisPage": {
+ "message": "編輯此頁",
+ "description": "The link label to edit the current page"
+ },
+ "theme.common.headingLinkTitle": {
+ "message": "{heading}的直接連結",
+ "description": "Title for link to heading"
+ },
+ "theme.lastUpdated.atDate": {
+ "message": "於 {date} ",
+ "description": "The words used to describe on which date a page has been last updated"
+ },
+ "theme.lastUpdated.byUser": {
+ "message": "由 {user} ",
+ "description": "The words used to describe by who the page has been last updated"
+ },
+ "theme.lastUpdated.lastUpdatedAtBy": {
+ "message": "最後{byUser}{atDate}更新",
+ "description": "The sentence used to display when a page has been last updated, and by who"
+ },
+ "theme.NotFound.title": {
+ "message": "找不到頁面",
+ "description": "The title of the 404 page"
+ },
+ "theme.navbar.mobileVersionsDropdown.label": {
+ "message": "選擇版本",
+ "description": "The label for the navbar versions dropdown on mobile view"
+ },
+ "theme.tags.tagsListLabel": {
+ "message": "標籤：",
+ "description": "The label alongside a tag list"
+ },
+ "theme.admonition.caution": {
+ "message": "警告",
+ "description": "The default label used for the Caution admonition (:::caution)"
+ },
+ "theme.admonition.danger": {
+ "message": "危險",
+ "description": "The default label used for the Danger admonition (:::danger)"
+ },
+ "theme.admonition.info": {
+ "message": "信息",
+ "description": "The default label used for the Info admonition (:::info)"
+ },
+ "theme.admonition.note": {
+ "message": "備註",
+ "description": "The default label used for the Note admonition (:::note)"
+ },
+ "theme.admonition.tip": {
+ "message": "提示",
+ "description": "The default label used for the Tip admonition (:::tip)"
+ },
+ "theme.admonition.warning": {
+ "message": "warning",
+ "description": "The default label used for the Warning admonition (:::warning)"
+ },
+ "theme.AnnouncementBar.closeButtonAriaLabel": {
+ "message": "關閉",
+ "description": "The ARIA label for close button of announcement bar"
+ },
+ "theme.blog.sidebar.navAriaLabel": {
+ "message": "最近部落格文章導覽",
+ "description": "The ARIA label for recent posts in the blog sidebar"
+ },
+ "theme.CodeBlock.copied": {
+ "message": "複製成功",
+ "description": "The copied button label on code blocks"
+ },
+ "theme.CodeBlock.copyButtonAriaLabel": {
+ "message": "複製代碼至剪貼簿",
+ "description": "The ARIA label for copy code blocks button"
+ },
+ "theme.CodeBlock.copy": {
+ "message": "複製",
+ "description": "The copy button label on code blocks"
+ },
+ "theme.CodeBlock.wordWrapToggle": {
+ "message": "切換自動換行",
+ "description": "The title attribute for toggle word wrapping button of code block lines"
+ },
+ "theme.DocSidebarItem.expandCategoryAriaLabel": {
+ "message": "Expand sidebar category '{label}'",
+ "description": "The ARIA label to expand the sidebar category"
+ },
+ "theme.DocSidebarItem.collapseCategoryAriaLabel": {
+ "message": "Collapse sidebar category '{label}'",
+ "description": "The ARIA label to collapse the sidebar category"
+ },
+ "theme.NavBar.navAriaLabel": {
+ "message": "主導航",
+ "description": "The ARIA label for the main navigation"
+ },
+ "theme.NotFound.p1": {
+ "message": "我們沒有您要找的頁面。",
+ "description": "The first paragraph of the 404 page"
+ },
+ "theme.NotFound.p2": {
+ "message": "請聯絡原始連結來源網站的所有者，並通知他們連結已毀損。",
+ "description": "The 2nd paragraph of the 404 page"
+ },
+ "theme.navbar.mobileLanguageDropdown.label": {
+ "message": "選擇語言",
+ "description": "The label for the mobile language switcher dropdown"
+ },
+ "theme.TOCCollapsible.toggleButtonLabel": {
+ "message": "本頁導覽",
+ "description": "The label used by the button on the collapsible TOC component"
+ },
+ "theme.blog.post.readMore": {
+ "message": "閱讀更多",
+ "description": "The label used in blog post item excerpts to link to full blog posts"
+ },
+ "theme.blog.post.readMoreLabel": {
+ "message": "閱讀 {title} 全文",
+ "description": "The ARIA label for the link to full blog posts from excerpts"
+ },
+ "theme.blog.post.readingTime.plurals": {
+ "message": "閱讀時間約 {readingTime} 分鐘",
+ "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+ },
+ "theme.docs.breadcrumbs.home": {
+ "message": "主頁面",
+ "description": "The ARIA label for the home page in the breadcrumbs"
+ },
+ "theme.docs.sidebar.collapseButtonTitle": {
+ "message": "收起側邊欄",
+ "description": "The title attribute for collapse button of doc sidebar"
+ },
+ "theme.docs.sidebar.collapseButtonAriaLabel": {
+ "message": "收起側邊欄",
+ "description": "The title attribute for collapse button of doc sidebar"
+ },
+ "theme.docs.sidebar.navAriaLabel": {
+ "message": "文件側邊欄",
+ "description": "The ARIA label for the sidebar navigation"
+ },
+ "theme.docs.sidebar.closeSidebarButtonAriaLabel": {
+ "message": "Close navigation bar",
+ "description": "The ARIA label for close button of mobile sidebar"
+ },
+ "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": {
+ "message": "← 回到主選單",
+ "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
+ },
+ "theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
+ "message": "Toggle navigation bar",
+ "description": "The ARIA label for hamburger menu button of mobile navigation"
+ },
+ "theme.docs.sidebar.expandButtonTitle": {
+ "message": "展開側邊欄",
+ "description": "The ARIA label and title attribute for expand button of doc sidebar"
+ },
+ "theme.docs.sidebar.expandButtonAriaLabel": {
+ "message": "展開側邊欄",
+ "description": "The ARIA label and title attribute for expand button of doc sidebar"
+ },
+ "theme.ErrorPageContent.tryAgain": {
+ "message": "重試",
+ "description": "The label of the button to try again rendering when the React error boundary captures an error"
+ },
+ "theme.common.skipToMainContent": {
+ "message": "跳至主要内容",
+ "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation"
+ },
+ "theme.tags.tagsPageTitle": {
+ "message": "標籤",
+ "description": "The title of the tag list page"
+ },
+ "theme.unlistedContent.title": {
+ "message": "未列出頁",
+ "description": "The unlisted content banner title"
+ },
+ "theme.unlistedContent.message": {
+ "message": "此頁面未列出。搜索引擎不會對其索引，只有擁有直接連結的用戶才能訪問。",
+ "description": "The unlisted content banner message"
+ }
+}
diff --git a/i18n/zh-Hant/docusaurus-plugin-content-docs/current.json b/i18n/zh-Hant/docusaurus-plugin-content-docs/current.json
new file mode 100644
index 0000000..59e3047
--- /dev/null
+++ b/i18n/zh-Hant/docusaurus-plugin-content-docs/current.json
@@ -0,0 +1,6 @@
+{
+ "version.label": {
+ "message": "當前",
+ "description": "The label for version current"
+ }
+}
diff --git a/i18n/zh-Hant/docusaurus-plugin-content-docs/current/configuration.md b/i18n/zh-Hant/docusaurus-plugin-content-docs/current/configuration.md
new file mode 100644
index 0000000..4e0c32d
--- /dev/null
+++ b/i18n/zh-Hant/docusaurus-plugin-content-docs/current/configuration.md
@@ -0,0 +1,63 @@
+# 配置
+
+如何配置嵌入式應用：
+1. 添加至
+2. 位置
+3. 可選的進階配置
+
+
+
+## 支援的實體
+Copper 支援 5 種實體，使用者可以在這些實體中添加嵌入式應用：
+1. 潛在客戶
+2. 人員
+3. 公司
+4. 銷售管道記錄
+5. 專案
+
+## 支援的位置
+Copper 支援 5 種位置，使用者可以在這些位置查看嵌入式應用：
+1. 側邊欄
+2. 活動面板
+3. 操作列
+4. 個人資料
+5. 左側導航
+
+## 可選的進階配置
+### html5Mode
+典型嵌入式應用的 URL 會是：
+```
+https://your-url.com/?location=sidebar&origin=...&instanceId=...
+```
+
+如果使用者指定 `html5Mode: true`，URL 將變為：
+```
+https://your-url.com/sidebar?origin=...&instanceId=...
+```
+
+### refreshOnContextUpdate
+默認情況下，在 Copper 應用中切換到新路由時，會向嵌入式應用發送事件。使用者現在可以使用以下代碼：
+```javascript
+sdk.on('contextUpdated', function () {
+ // 這裡是處理事件的代碼
+})
+```
+除了處理事件外，使用者還可以通過將可選的進階配置設置為 `refreshOnContextUpdate: true` 來刷新嵌入式應用。每次應用變更路由/上下文時，嵌入式應用將會刷新。
+
+### voip
+通過設置可選的進階配置：`voip: true`，Copper 中的所有電話號碼現在變為可點擊。當使用者點擊電話號碼時，他們將能夠訂閱一個名為 `phoneNumberClicked` 的事件。
+```javascript
+sdk.on('phoneNumberClicked', function ({ number }) {
+ // 對電話號碼進行處理
+})
+```
+
+### allowHttp
+默認情況下，Copper 不允許在嵌入式應用中使用 http URL。然而，設置可選的進階配置 `allowHttp: true` 將允許使用者將 http URL 嵌入到嵌入式應用中。
+
+如果瀏覽器仍然阻止使用者查看 http URL，可以按照以下步驟解除阻擋：
+1. 點擊瀏覽器地址欄右側的小圖標
+2. 點擊「允許運行不安全的腳本」
+
+### verifyServer
+這允許使用者驗證他們的父幀實際上是 Copper。請參見更多細節：[安全範例](examples#安全範例)。
\ No newline at end of file
diff --git a/i18n/zh-Hant/docusaurus-plugin-content-docs/current/examples.md b/i18n/zh-Hant/docusaurus-plugin-content-docs/current/examples.md
new file mode 100644
index 0000000..ff7eba1
--- /dev/null
+++ b/i18n/zh-Hant/docusaurus-plugin-content-docs/current/examples.md
@@ -0,0 +1,92 @@
+# 範例
+## 基本範例
+這個範例的 JavaScript 網頁應用程式代碼可以在 `examples/basic_iframe` 找到。這個範例不需要後端伺服器，開發時使用的是 webpacker 伺服器。
+
+### 快速開始
+#### 啟動 webpack 開發伺服器
+```bash
+yarn start
+# 或
+npm start
+```
+伺服器啟動後，使用瀏覽器訪問 https://localhost:8080 並信任 SSL 憑證。
+
+#### 添加嵌入式應用（Copper 網頁應用）
+從 Copper 的網頁管理頁面，導航到 `設定 > 整合`，向下滾動到頁面底部，使用者將會看到一個「建立嵌入式應用」的卡片。選擇「建立嵌入式應用」卡片並填入以下信息，然後點擊「儲存」。
+
+* 名稱：插入這個嵌入式應用的名稱
+* URL：`https://localhost:8080`
+* 添加至：選擇潛在客戶
+* 位置：選擇側邊欄
+
+要查看上面創建的嵌入式應用，導航到潛在客戶記錄的相關標籤。
+
+### 開發
+這個基本範例的源代碼包含在 src 文件夾中的 index.html 和 app.js，使用者可以在項目中更改和添加更多文件。
+
+#### 初始化 SDK
+```javascript
+import Copper from 'copper-sdk'
+const sdk = Copper.init()
+```
+
+#### 使用 SDK
+getContext() API 範例：
+```javascript
+const context = await sdk.getContext()
+```
+
+## 安全範例
+這個範例更注重安全性。代碼可以在 `examples/secure_iframe` 找到。這個嵌入式應用會首先向 iframe URL 發送一個包含 JSON Web Token (JWT) 的 POST 請求。嵌入式應用應首先從 Copper 獲取公鑰，並使用該公鑰來驗證 JSON Web Token。
+
+### 快速開始
+安全範例使用基於 express 的伺服器端和 webpacker 客戶端。
+#### 啟動伺服器和客戶端
+```bash
+yarn dev
+```
+可選地，伺服器和客戶端可以分開啟動：
+#### 啟動伺服器
+```bash
+yarn server
+```
+#### 啟動客戶端 webpack 開發伺服器
+```bash
+yarn client
+```
+
+#### 添加嵌入式應用（Copper 網頁應用）
+從 Copper 的網頁管理頁面，導航到 `設定 > 整合`，向下滾動到頁面底部，使用者將會看到一個「建立嵌入式應用」的卡片。選擇「建立嵌入式應用」卡片並填入以下信息，然後點擊「儲存」。
+
+* 名稱：插入這個嵌入式應用的名稱
+* URL：`https://localhost:8080`
+* 添加至：選擇潛在客戶
+* 位置：選擇側邊欄
+* 可選的進階配置：`{"verifyServer": true}`
+
+要查看上面創建的嵌入式應用，導航到潛在客戶記錄的相關標籤。
+
+### 開發
+當嵌入式應用配置為安全模式時，它將首先接收帶有 JWT 的 POST 請求。JWT 使用 Copper 的私鑰進行加密。必須首先獲取 Copper 的公鑰以驗證 JWT。
+#### 獲取 Copper 的公鑰
+```javascript
+ const { data } = await axios({
+ method: 'get',
+ url: 'https://api.copper.com/developer_api/v1/embedded_apps/public_key',
+ });
+```
+接下來，使用公鑰在 POST 處理程序中驗證 JWT。
+```javascript
+app.post('/*', async function(req, res) {
+ const token = req.body.jwt;
+ jwt.verify(token, publicKey, { algorithm: ['RS256'] }, function(err, payload) {
+ if (err) {
+ // JWT 無效，不允許進一步訪問
+ res.send('error');
+ } else {
+ // JWT 有效，渲染頁面
+ }
+ });
+});
+```
+你的伺服器端應該僅在 JWT 令牌有效時允許訪問。
\ No newline at end of file
diff --git a/i18n/zh-Hant/docusaurus-plugin-content-docs/current/images/embedded-app-setting.png b/i18n/zh-Hant/docusaurus-plugin-content-docs/current/images/embedded-app-setting.png
new file mode 100644
index 0000000..c3e509a
Binary files /dev/null and b/i18n/zh-Hant/docusaurus-plugin-content-docs/current/images/embedded-app-setting.png differ
diff --git a/i18n/zh-Hant/docusaurus-plugin-content-docs/current/quickstart.md b/i18n/zh-Hant/docusaurus-plugin-content-docs/current/quickstart.md
new file mode 100644
index 0000000..4694996
--- /dev/null
+++ b/i18n/zh-Hant/docusaurus-plugin-content-docs/current/quickstart.md
@@ -0,0 +1,43 @@
+---
+slug: /
+---
+
+# 快速入門
+
+## 使用 webpack/rollup/browserify 等等
+
+執行以下程式：
+
+```bash
+yarn add copper-sdk
+# or
+npm install copper-sdk --save
+```
+
+接著：
+
+```javascript
+import Copper from 'copper-sdk';
+const sdk = Copper.init();
+
+sdk.getContext()
+ .then(({ context }) => {
+ // do something with the context
+ });
+```
+
+## 使用 CDN
+`copper-sdk` 部屬於 https://www.jsdelivr.com/package/npm/copper-sdk
+
+```html
+
+
+```
diff --git a/i18n/zh-Hant/docusaurus-plugin-content-docs/current/reference.md b/i18n/zh-Hant/docusaurus-plugin-content-docs/current/reference.md
new file mode 100644
index 0000000..1a9f49e
--- /dev/null
+++ b/i18n/zh-Hant/docusaurus-plugin-content-docs/current/reference.md
@@ -0,0 +1,310 @@
+# 函式
+
+## 初始化
+`Copper.init()` 方法用於初始化和設置 SDK。所有其他 SDK 方法必須在此之後調用。
+```javascript
+Copper.init()
+```
+
+## getContext()
+`getContext()` 方法返回當前 Copper 頁面的上下文。
+```javascript
+getContext()
+```
+
+#### 返回
+| 類型 | 描述 |
+| ------ | ------------------------ |
+| 物件 | 當前上下文物件 |
+
+## saveContext()
+`save()` 方法會將值儲存到伺服器並更新 Copper UI。
+
+#### 範例
+```javascript
+const context = await sdk.getContext();
+context.name = "Joe"
+context.save()
+```
+
+## showModal()
+`showModal()` 方法將在 Copper 的網頁中打開模態窗口。模態窗口的 URL 設為嵌入式應用的 URL 加上 `?location=modal`。例如，如果嵌入式應用的 URL 為 `https://www.example.com`，則模態窗口的 URL 為 `https://www.example.com?location=modal`。
+
+#### 參數
+| 名稱 | 類型 | 必填 | 描述 |
+| ---- | ------ | ------ | ---------------------------------------- |
+| Data | 物件 | 否 | 將作為參數傳遞給模態窗口的數據 |
+
+#### 特殊參數
+`showModal({ width: 300, height: 400, displayHeader: true })`
+
+| 名稱 | 類型 | 必填 | 描述 |
+| ------------- | ------- | ------ | ----------------------------------- |
+| width | 整數 | 否 | 模態窗口的寬度 |
+| height | 整數 | 否 | 模態窗口的高度 |
+| displayHeader | 布林值 | 否 | 是否顯示標題 |
+
+#### 範例
+```javascript
+sdk.showModal({ foo: 'bar'})
+```
+
+## closeModal()
+`closeModal()` 方法將關閉當前活躍的模態窗口。
+
+#### 範例
+```javascript
+sdk.closeModal()
+```
+
+## setAppUI()
+`setAppUI()` 方法將更改父 Copper 網頁的 UI。
+
+#### 參數
+| 名稱 | 類型 | 必填 | 描述 |
+| ----------------- | ------ | ------ | ------------------------------------------------------------------------------------------------------ |
+| Data | 物件 | 是 | 數據使用 JSON 格式。目前支持 JSON 中的六個鍵：
"count", "height", "width", "disableAddButton", "showActionBar", "isActionBarActive". |
+
+#### 範例
+```javascript
+sdk.setAppUI({
+ count: 5, // 更改應用標頭中的計數器值
+ width: 500, // 更改 iframe 寬度（目前支持於模態窗口/操作欄）
+ height: 500, // 更改 iframe 高度
+ disableAddButton: true, // 禁用 iframe 上方父框架中的添加按鈕
+ showActionBar: true, // 顯示嵌入式應用 iframe 的操作欄
+ isActionBarActive: true, // 高亮顯示操作欄圖標
+ allowModals: false, // 為 true 時，允許 iframe 中的模態窗口
+})
+```
+
+## publishMessage()
+`publishMessage(type, target, data)` 方法將消息發布到同一嵌入式應用的其他位置。
+
+#### 參數
+| 名稱 | 類型 | 必填 | 描述 |
+| ------ | ------ | ------ | ---------------------------------------------------------------------------------------------------- |
+| Type | 字串 | 是 | 消息的類型，可以是任何字串 |
+| Target | 字串 | 是 | 消息接收者的位置。目前支持的地點包括：
"sidebar", "activity_panel", "action_bar", "profile", "modal".
"*" 代表所有位置，除了發送者。 |
+| Data | JSON | 是 | 要發送的消息內容 |
+
+#### 範例
+```javascript
+sdk.publishMessage('myMessageType', 'sidebar', {foo: 'bar'})
+```
+
+## on()
+`on(type, cb)` 方法訂閱消息類型並使用回調函數 `cb` 處理。
+
+#### 參數
+| 名稱 | 類型 | 必填 | 描述 |
+| ---- | -------- | ------ | -------------------------------- |
+| Type | 字串 | 是 | 要訂閱的消息類型 |
+| cb | 函數 | 是 | 用於處理消息的回調函數 |
+
+#### 事件
+| 事件名稱 | 觸發時機 |
+| ------------------ | ------------------------------------- |
+| addButtonClicked | 當應用在側邊欄中並且 + 按鈕被點擊時 |
+| phoneNumberClicked | 當 VOIP 配置開啟且點擊電話號碼時 |
+| contextUpdated | 當 Copper 應用的路由發生變更時 |
+| recordSelected | 當列表視圖中選擇任何項目時 |
+
+#### 範例
+```javascript
+sdk.on('myMessageType', (msg) => {
+ console.log(msg)
+})
+```
+
+## api()
+`api(url, options)` 方法將代理來自 Copper API 伺服器 `api.copper.com` 的 API 呼叫。
+
+#### 參數
+| 名稱 | 類型 | 必填 | 描述 |
+| ------- | ------ | ------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| url | 字串 | 是 | API 的 URL。例如：'/v1/people/1' |
+| Options | 物件 | 是 | API 呼叫的選項。支持兩個鍵 'method' 和 'body'，其中 'method' 的值可以是
'GET', 'POST', 'PUT', 'PATCH' 和 'DELETE'。'body' 的值是發送到 API 端點的數據。 |
+
+#### 範例
+```javascript
+sdk.api('/v1/leads/', {
+ method: 'POST',
+ body: JSON.stringify({
+ name: 'lead name'
+ })
+})
+```
+所有開發者 API URL 都受支持。每個 API 端點的請求方法和數據格式可以在 Copper 的 API 文檔中找到。
+
+## refreshUI()
+`refreshUI(target)` 方法將刷新目標的 UI 部分。主要在上述 `api(url, options)` 呼叫後使用，以更新 UI 以反映伺服器中數據的變更。
+
+#### 參數
+| 名稱 | 類型 | 必填 | 描述 |
+| ------ | ------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Target | 物件 | 是 | 參數的格式為 `{ name: targetName, data: data }`，其中 targetName 可以是 'ActivityLog' 或 'Related'。'ActivityLog' 的數據不是必需的。對於 'Related'，數據格式為 `{ type: entityType }`。 |
+
+#### 範例
+```javascript
+sdk.refreshUI({ name: 'ActivityLog'})
+sdk.refreshUI({ name: 'Related', data: { type: 'lead'}})
+```
+
+## logActivity()
+`logActivity(type, details)` 方法在 Copper 網頁應用中創建活動日誌。
+
+#### 參數
+| 名稱 | 類型 | 必填 | 描述 |
+| ------- | ------ | ------ | ---------------------------- |
+| Type | 字串 | 是 | 活動日誌的類型 |
+| Details | 物件 | 是 | 活動日誌的詳細數據 |
+
+請參閱 Copper 的開發者 API 文檔，以獲取活動類型和詳細信息。
+
+#### 範例
+```javascript
+const activityType = 0; // 活動類型 'note'
+const details = '這是一條備註';
+sdk.logActivity(activityType, details);
+```
+
+## createEntity()
+`createEntity(entityType, entityData)` 方法在 Copper 網頁應用中創建一個實體。
+
+#### 參數
+
+| 名稱 | 類型 | 必填 | 描述 |
+| ---------- | ------ | ------ | ------------------------------------------------------------------------------------ |
+| EntityType | 字串 | 是 | 實體類型。支持的值有：'lead', 'person', 'company', 'opportunity', 'project', 'task' |
+| entityData | 物件 | 是 | 實體數據。 |
+
+請參閱 Copper 的開發者 API 文檔以獲取實體詳細信息。
+
+#### 範例
+```javascript
+const entityType = 'lead';
+const entityData = {
+ name: '我的潛在客戶',
+ email: {
+ email: 'mylead@noemail.com',
+ category: 'work'
+ },
+ phone_numbers: [
+ {
+ number: '1234567',
+ category: 'mobile'
+ }
+ ]
+};
+sdk.createEntity(entityType, entityData);
+```
+
+## relateEntity()
+`relateEntity(entityType, entityId, target)` 方法將兩個實體在 Copper 網頁應用中關聯起來。
+
+#### 參數
+| 名稱 | 類型 | 必填 | 描述 |
+| ---------- | ------- | ------ | ------------------------------------------------------------------------------------ |
+| entityType | 字串 | 是 | 實體類型。支持的值有：'lead', 'person', 'company', 'opportunity', 'project', 'task' |
+| entityId | 整數 | 是 | 實體記錄的 ID |
+| Target | 物件 | 是 | 目標實體。格式為 `{ id: id, type: entityType }` |
+
+請參閱 Copper 的開發者 API 文檔以獲取實體詳細信息。
+
+#### 範例
+```javascript
+const entityType = 'task';
+const entityId = 1;
+const target = {
+ id: 10,
+ type: 'opportunity'
+};
+sdk.relateEntity(entityType, entityId, target); // 將機會 10 關聯到任務 1
+```
+
+## navigateToEntityDetail()
+此方法允許嵌入式應用導航到特定實體記錄的頁面。
+
+#### 參數
+| 名稱 | 類型 | 必填 | 描述 |
+| ---------- | ------- | ------ | ------------------------------------------------------------------------------------ |
+| entityType | 字串 | 是 | 實體類型。支持的值有：'lead', 'person', 'company', 'opportunity', 'project', 'task' |
+| entityId | 整數 | 是 | 實體記錄的 ID |
+
+請參閱 Copper 的開發者 API 文檔以獲取實體詳細信息。
+
+#### 範例
+```javascript
+const entityType = 'task';
+const entityId = 1;
+sdk.navigateToEntityDetail(entityType, entityId); // 導航到 ID 為 1 的任務
+```
+
+## getSelectedRecords()
+通過 `pageNumber` 和 `pageSize` 獲取選中的記錄。
+
+#### 參數
+| 名稱 | 類型 | 必填 | 描述 |
+| ---------- | ------- | ------ | ------------------------------------------------------------------------------------ |
+| pageNumber | 整數 | 否 | 頁碼 |
+| pageSize | 整數 | 否 | 頁面大小 |
+
+#### 範例
+```javascript
+await sdk.getSelectedRecords({ pageNumber: 0, pageSize: 100 });
+// 返回
+[
+ {
+ "id": 165837,
+ "first_name": "Jason",
+ "last_name": "Mraz",
+ "middle_name": null,
+ ...
+ }
+]
+```
+
+## getUserInfo()
+獲取當前用戶信息。
+
+返回的響應將包含用戶所擁有的角色列表。Copper 目前支持三種角色：
+
+* `user`: 用戶可以正常使用系統。
+* `admin`: 用戶可以執行管理操作。
+* `account_owner`: 用戶是帳戶擁有者。
+
+#### 範例
+```javascript
+await sdk.getUserInfo();
+// 返回
+{
+ "account": {
+ "id": 1,
+ "name": "Google"
+ },
+ "user": {
+ "email": "larry@google.com",
+ "id": 1,
+ "name": "Larry Page",
+ "roles": ["user", "admin"]
+ }
+}
+```
+
+## getConfig()
+獲取當前應用和安裝配置。
+
+#### 範例
+```javascript
+await sdk.getConfig();
+// 返回
+{
+ "appConfig": {
+ "height": 600
+ },
+ "config": { // 這是安裝配置
+ "token": "my_token"
+ }
+}
+```
\ No newline at end of file
diff --git a/i18n/zh-Hant/docusaurus-plugin-content-docs/current/sidebars.ts b/i18n/zh-Hant/docusaurus-plugin-content-docs/current/sidebars.ts
new file mode 100644
index 0000000..0a0b578
--- /dev/null
+++ b/i18n/zh-Hant/docusaurus-plugin-content-docs/current/sidebars.ts
@@ -0,0 +1,24 @@
+import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
+
+const sidebars: SidebarsConfig = {
+ mainSidebar: [
+ {
+ type: 'doc',
+ id: '快速入門',
+ },
+ {
+ type: 'doc',
+ id: '函式',
+ },
+ {
+ type: 'doc',
+ id: '設定',
+ },
+ {
+ type: 'doc',
+ id: '範例',
+ },
+ ],
+};
+
+export default sidebars;
diff --git a/i18n/zh-Hant/docusaurus-theme-classic/footer.json b/i18n/zh-Hant/docusaurus-theme-classic/footer.json
new file mode 100644
index 0000000..6275d4a
--- /dev/null
+++ b/i18n/zh-Hant/docusaurus-theme-classic/footer.json
@@ -0,0 +1,6 @@
+{
+ "copyright": {
+ "message": "Copyright © 2024 Copper CRM",
+ "description": "The footer copyright"
+ }
+}
diff --git a/i18n/zh-Hant/docusaurus-theme-classic/navbar.json b/i18n/zh-Hant/docusaurus-theme-classic/navbar.json
new file mode 100644
index 0000000..a0126ed
--- /dev/null
+++ b/i18n/zh-Hant/docusaurus-theme-classic/navbar.json
@@ -0,0 +1,14 @@
+{
+ "title": {
+ "message": "Copper App SDK",
+ "description": "The title in the navbar"
+ },
+ "item.label.Copper": {
+ "message": "Copper",
+ "description": "Navbar item with label Copper"
+ },
+ "item.label.GitHub": {
+ "message": "GitHub",
+ "description": "Navbar item with label GitHub"
+ }
+}