टाइमजोन ग्लोब एम्बेड करें

आप एक सरल iframe का उपयोग करके किसी भी वेबसाइट में WhenToMeet इंटरैक्टिव 3D टाइमजोन ग्लोब एम्बेड कर सकते हैं। ग्लोब शहरों के मार्कर दिखाता है जिनमें लाइव स्थानीय समय हैं और एक पॉलिश्ड लुक के लिए स्वचालित रूप से घूमता है।

ग्लोब एम्बेड

अपने HTML में यह स्निपेट जोड़ें:

<iframe
  src="https://timezones.whentomeet.io/embed/globe?cities=newyork,london,tokyo&autoRotate=true&theme=dark"
  width="500"
  height="500"
  style="border: none; border-radius: 16px; background: #0a1628;"
  loading="lazy"
  allow="webgl"
  title="Timezone Globe"
></iframe>

पैरामीटर

iframe src URL पर क्वेरी पैरामीटर का उपयोग करके एम्बेड को कॉन्फ़िगर करें:

पैरामीटर	प्रकार	डिफॉल्ट	विवरण
`cities`	string	(कोई नहीं)	अल्पविराम से अलग किए गए शहर IDs, जैसे `newyork,london,tokyo`
`theme`	`"light"` \| `"dark"`	`"dark"`	रंग थीम
`autoRotate`	boolean	`false`	ग्लोब को स्वचालित रूप से धीरे-धीरे घुमाएं
`h24`	boolean	`false`	12-घंटे के बजाय 24-घंटे का समय प्रारूप उपयोग करें
`hideMarkers`	boolean	`false`	शहर के मार्कर छुपाएं (केवल ग्लोब दिखाएं)

उपलब्ध शहर IDs

Timezones ऐप से शहर ID का उपयोग करें। सामान्य IDs में शामिल हैं: newyork, london, tokyo, berlin, paris, sydney, dubai, singapore, losangeles, chicago, toronto, mumbai, hongkong, shanghai, saopaulo, mexicocity, cairo, lagos, nairobi, moscow.

हल्का विजेट

यदि आपको 3D ग्लोब के बिना केवल एक कॉम्पैक्ट टाइमजोन घड़ी की आवश्यकता है, तो इसके बजाय हल्का एम्बेड का उपयोग करें:

<iframe
  src="https://timezones.whentomeet.io/embed?cities=newyork,london,tokyo&theme=dark"
  width="300"
  height="250"
  style="border: none; border-radius: 12px;"
  title="Timezone Widget"
></iframe>

यह विजेट शहर के समय को एक सूची प्रारूप में दिखाता है जिसमें व्यावसायिक घंटों का ओवरलैप जानकारी है और संसाधनों पर बहुत हल्का है।

आकार की युक्तियाँ

ग्लोब एक वर्ग कंटेनर में सबसे अच्छा दिखता है (1:1 पहलू अनुपात)।
न्यूनतम अनुशंसित आकार: 300 x 300 पिक्सेल।
ग्लोब पोर्ट्रेट और लैंडस्केप ओरिएंटेशन के लिए अपने कैमरा FOV को स्वचालित रूप से अनुकूल करता है।
एक पॉलिश लुक के लिए iframe पर CSS border-radius का उपयोग करें।

उदाहरण

डार्क थीम स्वचालित घुमाव के साथ

<iframe
  src="https://timezones.whentomeet.io/embed/globe?cities=london,newyork,tokyo,sydney&theme=dark&autoRotate=true"
  width="600"
  height="600"
  style="border: none; border-radius: 16px; background: #0a1628;"
  loading="lazy"
  allow="webgl"
  title="Timezone Globe"
></iframe>

हल्की थीम, 24-घंटे का प्रारूप

<iframe
  src="https://timezones.whentomeet.io/embed/globe?cities=berlin,paris,dubai&theme=light&h24=true"
  width="400"
  height="400"
  style="border: none; border-radius: 16px;"
  loading="lazy"
  allow="webgl"
  title="Timezone Globe"
></iframe>

केवल ग्लोब (कोई मार्कर नहीं)

<iframe
  src="https://timezones.whentomeet.io/embed/globe?hideMarkers=true&theme=dark&autoRotate=true"
  width="300"
  height="300"
  style="border: none; border-radius: 50%; background: #0a1628;"
  loading="lazy"
  allow="webgl"
  title="Globe"
></iframe>