Tidio

ทางการ

เชื่อมต่อ Tidio กับเว็บไซต์ของคุณผ่าน MCP ฝังวิดเจ็ตโดยไม่ต้องออกจากสภาพแวดล้อมการเขียนโปรแกรมของคุณ

คุณทำอะไรได้บ้างด้วย Tidio MCP?

  • เชื่อมต่อ Tidio กับเว็บไซต์ — ขอให้เชื่อมต่อ Tidio กับ URL ของเว็บไซต์ผ่าน tidio_connect ซึ่งจะเปิดเบราว์เซอร์สำหรับการเข้าสู่ระบบ OAuth และดึงคีย์สาธารณะของคุณกลับมาโดยอัตโนมัติ
  • ตรวจสอบสถานะการเชื่อมต่อ — ใช้เพื่อยืนยันว่า Tidio เชื่อมต่ออยู่หรือไม่ และดึงโค้ดฝังตัวปัจจุบันของคุณกลับมา
  • สร้างโค้ดฝังตัว — เรียกใช้ด้วยคีย์สาธารณะเพื่อสร้าง JavaScript ที่พร้อมใช้งาน โดยสามารถเลือกโหลดแบบ async หรือ sync ได้
  • ยกเลิกการเชื่อมต่อ Tidio — เรียกใช้เพื่อลบข้อมูลประจำตัวที่จัดเก็บไว้ในเครื่องจาก ~/.tidio-mcp/credentials.json

เอกสาร

ตัวเชื่อมต่อ MCP ของ Tidio

เซิร์ฟเวอร์ MCP (Model Context Protocol) ที่เชื่อมต่อผู้ช่วย AI เข้ากับแชทสดของ Tidio - พร้อมการตั้งค่าอัตโนมัติ

คุณสมบัติ

  • การตั้งค่าอัตโนมัติ: เชื่อมต่อกับ Tidio ด้วยคำสั่งเดียว - ไม่ต้องคัดลอกคีย์ด้วยตนเอง
  • การยืนยันตัวตน OAuth: เปิดเบราว์เซอร์เพื่อเข้าสู่ระบบ Tidio อย่างปลอดภัย และดึงคีย์สาธารณะของคุณโดยอัตโนมัติ
  • การจัดเก็บข้อมูลประจำตัว: ข้อมูลประจำตัวจะถูกบันทึกในเครื่องสำหรับเซสชันถัดไป
  • การสร้างโค้ดฝังตัว: รับโค้ด JavaScript ที่พร้อมใช้งานสำหรับเว็บไซต์ใดก็ได้

การติดตั้ง

npm install tidio-mcp-connector

หรือโคลนและสร้างในเครื่อง:

git clone https://github.com/your-username/tidio-mcp-connector.git
cd tidio-mcp-connector
npm install
npm run build

การใช้งาน

กับ Claude Desktop

เพิ่มในไฟล์คอนฟิกของ Claude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "tidio": {
      "command": "npx",
      "args": ["tidio-mcp-connector"]
    }
  }
}

กับ Lovable

ตัวเชื่อมต่อ MCP นี้ทำงานร่วมกับ Lovable และแพลตฟอร์มพัฒนาที่ขับเคลื่อนด้วย AI ที่คล้ายกัน เพิ่มเป็นเซิร์ฟเวอร์ MCP แบบกำหนดเอง

กับ MCP Inspector (การทดสอบ)

npx @modelcontextprotocol/inspector npx tidio-mcp-connector

เครื่องมือที่มีให้

tidio_connect (แนะนำ)

เชื่อมต่อกับ Tidio และรับคีย์สาธารณะของคุณโดยอัตโนมัติ

วิธีการทำงาน:

  1. เปิดเบราว์เซอร์ของคุณไปยังหน้าเข้าสู่ระบบของ Tidio
  2. คุณยืนยันตัวตนด้วยบัญชี Tidio ของคุณ
  3. ส่งคืนคีย์สาธารณะและโค้ดฝังตัวของคุณโดยอัตโนมัติ

พารามิเตอร์:

  • site_url (จำเป็น): URL ของเว็บไซต์ที่จะฝัง Tidio

ตัวอย่าง:

Connect Tidio to https://mywebsite.com

tidio_status

ตรวจสอบสถานะการเชื่อมต่อของคุณและรับโค้ดฝังตัว

พารามิเตอร์: ไม่มี

tidio_disconnect

ล้างข้อมูลประจำตัวที่เก็บไว้

พารามิเตอร์: ไม่มี

generate_tidio_embed

สร้างโค้ดฝังตัวสำหรับคีย์สาธารณะเฉพาะ (ถ้าคุณมีอยู่แล้ว)

พารามิเตอร์:

  • public_key (จำเป็น): คีย์สาธารณะ Tidio ของคุณ
  • loading_mode (ไม่บังคับ): "async" (ค่าเริ่มต้น) หรือ "sync"

วิธีการทำงาน

  1. ผู้ใช้เรียก tidio_connect พร้อม URL ของเว็บไซต์
  2. เบราว์เซอร์เปิด ไปยังหน้าสำหรับยืนยันตัวตนของ Tidio
  3. ผู้ใช้เข้าสู่ระบบ ด้วยบัญชี Tidio ของตน
  4. ได้รับ Callback - เซิร์ฟเวอร์ MCP รับ refresh token
  5. เรียก API - แลกเปลี่ยน token เป็น access token จากนั้นดึงคีย์สาธารณะ
  6. บันทึกข้อมูลประจำตัว ไปยัง ~/.tidio-mcp/credentials.json
  7. ส่งคืนโค้ดฝังตัว - พร้อมที่จะเพิ่มลงในเว็บไซต์

การจัดเก็บข้อมูลประจำตัว

ข้อมูลประจำตัวถูกจัดเก็บในเครื่องที่ ~/.tidio-mcp/credentials.json:

{
  "public_key": "abc123...",
  "access_token": "...",
  "refresh_token": "...",
  "site_url": "https://example.com",
  "created_at": "2024-01-01T00:00:00.000Z",
  "updated_at": "2024-01-01T00:00:00.000Z"
}

ผลลัพธ์โค้ดฝังตัว

ตัวเชื่อมต่อสร้างโค้ดโหลดแบบ async ที่ปรับให้เหมาะสม:

<script type="text/javascript">
document.tidioChatCode = "YOUR_PUBLIC_KEY";
(function() {
  function asyncLoad() {
    var tidioScript = document.createElement("script");
    tidioScript.type = "text/javascript";
    tidioScript.async = true;
    tidioScript.src = "//code.tidio.co/YOUR_PUBLIC_KEY.js";
    document.body.appendChild(tidioScript);
  }
  if (window.attachEvent) {
    window.attachEvent("onload", asyncLoad);
  } else {
    window.addEventListener("load", asyncLoad, false);
  }
})();
</script>

การพัฒนา

# Install dependencies
npm install

# Run in development mode
npm run dev

# Build for production
npm run build

# Run built version
npm start