💬 Need help?มีอะไรให้ช่วยไหม?
📋 Free with SiamEPOS Proฟรีในแพ็กเกจ SiamEPOS Pro

Add bookings to
your website in 5 minutes

เพิ่มระบบจองโต๊ะให้
เว็บไซต์ของคุณ ใน 5 นาที

The SiamEPOS booking widget works on any website — WordPress, Wix, Squarespace, Shopify or custom HTML. Customers book, you get notified instantly. Zero commission. Always.

วิดเจ็ตจองโต๊ะของ SiamEPOS ใช้ได้กับเว็บไซต์ทุกแบบ — WordPress, Wix, Squarespace, Shopify หรือเว็บ HTML ที่เขียนเอง ลูกค้าจองปุ๊บ คุณได้รับแจ้งเตือนทันที ไม่มีค่าคอมมิชชั่น ตลอดไป

1
Copy your codeคัดลอกโค้ด
2
Paste into your websiteวางลงในเว็บไซต์ของคุณ
3
Bookings go liveเปิดรับจองโต๊ะได้เลย
Orchid Thai Restaurant
Authentic Thai cuisine • London
🌻 Reserve a Table
🔒 Powered by SiamEPOS • 0% commission
Your widget code
โค้ดวิดเจ็ตของคุณ
Replace YOUR-RESTAURANT-ID with the ID from your SiamEPOS admin panel.
เปลี่ยน YOUR-RESTAURANT-ID เป็น ID ของร้านคุณ ดูได้จากหน้าแอดมิน SiamEPOS
<!-- SiamEPOS Booking Widget --> <script src="https://restaurant-epos-production.up.railway.app/widget.js" data-restaurant="YOUR-RESTAURANT-ID" data-color="#C9A84C" data-lang="en"></script> <div id="siamepos-widget"></div>

Step-by-step for every platform

สอนทีละขั้นตอน ครบทุกแพลตฟอร์ม

1
Log in to your WordPress dashboard
เข้าสู่แดชบอร์ด WordPress ของคุณ

Go to yoursite.com/wp-admin and log in with your username and password.

เข้าไปที่ yoursite.com/wp-admin แล้วล็อกอินด้วยชื่อผู้ใช้และรหัสผ่านของคุณ

2
Go to the page where you want the booking form
ไปยังหน้าที่อยากให้มีฟอร์มจองโต๊ะ

Click Pages in the left menu, find your page (e.g. “Reservations” or “Book a Table”), and click Edit.

คลิก Pages ที่เมนูด้านซ้าย หาหน้าที่ต้องการ (เช่น "Reservations" หรือ "Book a Table") แล้วคลิก Edit

📋 WordPress — Pages › Edit Page
Book a Table
Paragraph
Image
+ Add block
Click + Add block and search for "Custom HTML"คลิก + Add block แล้วค้นหาคำว่า "Custom HTML"
3
Add a Custom HTML block and paste the code
เพิ่มบล็อก Custom HTML แล้ววางโค้ด

In the Gutenberg editor, click + Add block → Custom HTML. Paste the widget code below into the HTML field.

ใน Gutenberg editor คลิก + Add block → Custom HTML แล้ววางโค้ดวิดเจ็ตด้านล่างลงในช่อง HTML

<!-- SiamEPOS Booking Widget --> <script src="https://restaurant-epos-production.up.railway.app/widget.js" data-restaurant="YOUR-RESTAURANT-ID" data-color="#C9A84C" data-lang="en"></script> <div id="siamepos-widget"></div>
💡
If you’re using the Classic Editor (older WordPress), click the Text tab (not Visual) and paste the code directly where you want the widget to appear.
ถ้าคุณใช้ Classic Editor (WordPress รุ่นเก่า) ให้คลิกแท็บ Text (ไม่ใช่ Visual) แล้ววางโค้ดตรงจุดที่อยากให้วิดเจ็ตแสดง
4
Click Update / Publish — you’re live!
คลิก Update / Publish — เสร็จแล้ว!

Click Update (or Publish if it’s a new page). Visit your website — the booking widget will appear and be ready to take bookings immediately.

คลิก Update (หรือ Publish ถ้าเป็นหน้าใหม่) แล้วเข้าไปดูเว็บไซต์ — วิดเจ็ตจองโต๊ะจะแสดงและพร้อมรับจองทันที

1
Open your Wix Editor
เปิด Wix Editor ของคุณ

Log in to wix.com, go to My Sites, and click Edit Site on your restaurant website.

ล็อกอินเข้า wix.com ไปที่ My Sites แล้วคลิก Edit Site ที่เว็บไซต์ร้านของคุณ

2
Navigate to the page and add an HTML iFrame element
ไปยังหน้าที่ต้องการ แล้วเพิ่ม HTML iFrame

In the Wix Editor, click Add Elements → Embed Code → HTML iFrame. Drag it to where you want the booking form.

ใน Wix Editor คลิก Add Elements → Embed Code → HTML iFrame แล้วลากไปวางตรงจุดที่อยากให้ฟอร์มจองโต๊ะแสดง

ℹ️
Wix uses iFrame embeds. The widget will appear inside an iframe on your page. This works perfectly — bookings still connect directly to your Siamrestaurant management system.
Wix ใช้การฝังแบบ iFrame วิดเจ็ตจะแสดงอยู่ใน iframe บนหน้าเว็บของคุณ ซึ่งใช้งานได้ปกติ — การจองโต๊ะยังเชื่อมตรงเข้าระบบ SiamEPOS ของคุณเหมือนเดิม
3
Enter the code in the HTML Settings panel
ใส่โค้ดในแผง HTML Settings

Double-click the iFrame element, click Enter Code, and paste the widget code.

ดับเบิลคลิกที่กล่อง iFrame คลิก Enter Code แล้ววางโค้ดวิดเจ็ตลงไป

<!-- SiamEPOS Booking Widget --> <script src="https://restaurant-epos-production.up.railway.app/widget.js" data-restaurant="YOUR-RESTAURANT-ID" data-color="#C9A84C" data-lang="en"></script> <div id="siamepos-widget"></div>
4
Click Apply, then Publish your site
คลิก Apply แล้ว Publish เว็บไซต์

Click Apply in the HTML panel, then click Publish in the top-right corner. Your booking widget is now live.

คลิก Apply ในแผง HTML แล้วคลิก Publish ที่มุมขวาบน — วิดเจ็ตจองโต๊ะของคุณออนไลน์แล้ว

1
Open your Squarespace editor and go to the page
เปิด Squarespace editor แล้วไปยังหน้าที่ต้องการ

Log in to your Squarespace account, go to Pages, hover over your page and click Edit.

ล็อกอินเข้าบัญชี Squarespace ไปที่ Pages เอาเมาส์ชี้ที่หน้าของคุณ แล้วคลิก Edit

2
Add a Code Block
เพิ่ม Code Block

Click the + to add a new block, then search for and select Code. Set the type to HTML and make sure "Display source" is turned off.

คลิก + เพื่อเพิ่มบล็อกใหม่ ค้นหาแล้วเลือก Code ตั้งชนิดเป็น HTML และอย่าลืมปิด "Display source"

⚠️
Squarespace Personal plan: Code blocks require a Business plan or higher. If you’re on Personal, you’ll need to upgrade or contact us for a Tier 2 installation.
Squarespace Personal plan: Code blocks ใช้ได้กับแผน Business ขึ้นไป ถ้าคุณใช้แผน Personal ต้องอัปเกรดก่อน หรือติดต่อเราเพื่อใช้บริการติดตั้งแบบ Tier 2
3
Paste the widget code and save
วางโค้ดวิดเจ็ตแล้วบันทึก

Paste the code below into the code block, click Apply, then Save the page.

วางโค้ดด้านล่างลงใน code block คลิก Apply แล้วกด Save บันทึกหน้า

<!-- SiamEPOS Booking Widget --> <script src="https://restaurant-epos-production.up.railway.app/widget.js" data-restaurant="YOUR-RESTAURANT-ID" data-color="#C9A84C" data-lang="en"></script> <div id="siamepos-widget"></div>
1
Go to Online Store → Themes → Edit code
ไปที่ Online Store → Themes → Edit code

In your Shopify Admin, go to Online Store → Themes. Click the three dots next to your current theme and select Edit code.

ใน Shopify Admin ไปที่ Online Store → Themes คลิกจุดสามจุดข้างธีมที่ใช้อยู่ แล้วเลือก Edit code

2
Create a new page template
สร้าง page template ใหม่

In the code editor, find the Templates folder. Click Add a new template, choose page, and name it page.booking.

ใน code editor หาโฟลเดอร์ Templates คลิก Add a new template เลือก page และตั้งชื่อ page.booking

3
Paste the widget code into the template
วางโค้ดลงใน template

In the new template file, add the widget code where you want it to appear. Then save and assign the template to your booking page.

วางโค้ดวิดเจ็ตลงในไฟล์ template ตรงจุดที่อยากให้แสดง บันทึก แล้วกำหนด template นี้ให้หน้าจองโต๊ะของคุณ

<!-- SiamEPOS Booking Widget --> <script src="https://restaurant-epos-production.up.railway.app/widget.js" data-restaurant="YOUR-RESTAURANT-ID" data-color="#C9A84C" data-lang="en"></script> <div id="siamepos-widget"></div> <!-- Liquid template wrapper --> {%- section 'main-page' -%}
💡
Shopify setup is more technical. If you get stuck, our Tier 2 installation service (£49) can do this for you remotely in under 30 minutes.
การติดตั้งบน Shopify จะเทคนิคกว่าแบบอื่นนิดหน่อย ถ้าติดขัดตรงไหน บริการติดตั้งแบบ Tier 2 (£49) ของเราทำให้ได้จากระยะไกล เสร็จภายใน 30 นาที
1
Open your HTML file in a text editor
เปิดไฟล์ HTML ในโปรแกรมแก้ไขข้อความ

Open the HTML file for the page where you want the booking form. Use any text editor — Notepad, VS Code, Sublime Text, etc.

เปิดไฟล์ HTML ของหน้าที่อยากให้มีฟอร์มจองโต๊ะ ใช้โปรแกรมแก้ไขข้อความตัวไหนก็ได้ — Notepad, VS Code, Sublime Text ฯลฯ

2
Find where you want the widget and paste the code
หาตำแหน่งที่ต้องการแล้ววางโค้ด

Paste the code wherever you want the booking form to appear in your page. It works anywhere inside the <body> tag.

วางโค้ดตรงจุดที่อยากให้ฟอร์มจองโต๊ะแสดงบนหน้าเว็บ วางตรงไหนก็ได้ภายในแท็ก <body>

<!-- Paste anywhere inside <body> --> <!-- SiamEPOS Booking Widget --> <script src="https://restaurant-epos-production.up.railway.app/widget.js" data-restaurant="YOUR-RESTAURANT-ID" data-color="#C9A84C" data-lang="en"></script> <div id="siamepos-widget"></div>
3
Save the file and upload to your server
บันทึกไฟล์แล้วอัพโหลดขึ้นเซิร์ฟเวอร์

Save the file, then upload it to your web server via FTP or your hosting control panel. Refresh your website to see the booking widget live.

บันทึกไฟล์ แล้วอัปโหลดขึ้นเว็บเซิร์ฟเวอร์ผ่าน FTP หรือแผงควบคุมโฮสติ้งของคุณ จากนั้นรีเฟรชเว็บไซต์ — วิดเจ็ตจองโต๊ะก็พร้อมใช้งานแล้ว

Make it match your brand

ปรับให้เข้ากับแบรนด์ร้านของคุณ

🎨
Brand colour
สีแบรนด์

Set data-color="#FF0000" to your restaurant’s hex colour. The button and accents update automatically.

ตั้งค่า data-color เป็นโค้ดสี hex ของแบรนด์ร้านคุณ ปุ่มและสีตกแต่งจะเปลี่ยนตามให้อัตโนมัติ

🇹🇭
Language toggle
ตัวเลือกภาษา

Set data-lang="th" for Thai, "en" for English, or "both" for a toggle.

ตั้งค่า data-lang เป็น th สำหรับภาษาไทย en สำหรับภาษาอังกฤษ หรือ both ให้ลูกค้าสลับภาษาเองได้

📝
Custom button text
ปรับข้อความบนปุ่มเอง

Set data-button-text="Book Now" to customise the button label and thank-you message.

ตั้งค่า data-button-text เพื่อเปลี่ยนข้อความบนปุ่มและข้อความขอบคุณหลังจอง

We’ve got every level covered

เราดูแลให้ครบทุกระดับ

Tier 1
Self-Service
ติดตั้งเอง
Free
ฟรี

Follow this guide. Included with every SiamEPOS Pro plan.

ทำตามคู่มือนี้ได้เลย รวมอยู่ในทุกแพ็กเกจ SiamEPOS Pro

Tier 3
Full Website
เว็บไซต์เต็มรูปแบบ
£499+

Don’t have a website? We build a full professional site with your booking widget included.

ยังไม่มีเว็บไซต์? เราสร้างเว็บมืออาชีพให้ทั้งเว็บ พร้อมวิดเจ็ตจองโต๊ะติดตั้งมาให้เรียบร้อย

Tier 4
Ongoing Care
ดูแลต่อเนื่อง
£49/mo

Monthly updates, menu changes, content edits — we handle everything for you.

อัปเดตรายเดือน เปลี่ยนเมนู แก้เนื้อหา — เราจัดการให้ทุกอย่าง

Still stuck? We’ll sort it.

ยังติดขัดอยู่? เราจัดการให้

WhatsApp us with a screenshot of where you’re stuck. We reply in Thai or English within the hour.

ทัก WhatsApp มาพร้อมภาพหน้าจอตรงจุดที่ติดขัด เราตอบกลับเป็นภาษาไทยหรืออังกฤษภายใน 1 ชั่วโมง

💬 WhatsApp for helpทัก WhatsApp ขอความช่วยเหลือ 📧 info@siamepos.co.uk