# ਏਮਬੈੱਡ ਅਤੇ ਸਾਂਝਾ ਕਰਨਾ


# ਏਮਬੈੱਡ ਅਤੇ ਸਾਂਝਾ ਕਰਨਾ

ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਹਾਡੀਆਂ [ਇਵੈਂਟ ਕਿਸਮਾਂ](./event-types) ਸੈੱਟ ਹੋ ਜਾਂਦੀਆਂ ਹਨ, ਤਾਂ ਬੁੱਕ ਹੋਣਾ ਸਿਰਫ਼ ਆਪਣਾ ਪੰਨਾ ਲੋਕਾਂ ਦੇ ਸਾਹਮਣੇ ਲਿਆਉਣ ਬਾਰੇ ਹੈ। ਤੁਸੀਂ ਇੱਕ ਸਾਦਾ ਲਿੰਕ ਕਿਤੇ ਵੀ ਸਾਂਝਾ ਕਰ ਸਕਦੇ ਹੋ, ਜਾਂ ਆਪਣਾ ਬੁਕਿੰਗ ਪੰਨਾ ਆਪਣੀ ਵੈੱਬਸਾਈਟ ਦੇ ਅੰਦਰ ਹੀ ਏਮਬੈੱਡ ਕਰ ਸਕਦੇ ਹੋ।

## ਇੱਕ ਲਿੰਕ ਸਾਂਝਾ ਕਰੋ

ਹਰ ਇਵੈਂਟ ਕਿਸਮ ਦਾ ਆਪਣਾ ਲਿੰਕ ਹੁੰਦਾ ਹੈ, ਜੋ ਤੁਹਾਡੇ ਹੈਂਡਲ ਅਤੇ ਇਵੈਂਟ ਸਲੱਗ ਤੋਂ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ — ਉਦਾਹਰਨ ਲਈ `calendar.imatic.ai/book/priya/intro-call`।

1. ਇਵੈਂਟ ਕਿਸਮ ਖੋਲ੍ਹੋ (ਜਾਂ ਇਸ ਨੂੰ ਆਪਣੀ ਸੂਚੀ ਵਿੱਚ ਲੱਭੋ)।
2. **Copy link** ਵਰਤੋ।
3. ਇਸ ਨੂੰ ਇੱਕ ਈਮੇਲ, ਆਪਣੇ ਈਮੇਲ ਹਸਤਾਖਰ, ਇੱਕ ਸੋਸ਼ਲ ਬਾਇਓ, ਇੱਕ ਚੈਟ ਸੁਨੇਹੇ ਵਿੱਚ ਪੇਸਟ ਕਰੋ — ਕਿਤੇ ਵੀ।

ਉਹ ਲਿੰਕ ਉਸ ਇਵੈਂਟ ਕਿਸਮ ਲਈ ਤੁਹਾਡਾ [ਜਨਤਕ ਬੁਕਿੰਗ ਪੰਨਾ](./booking-page) ਖੋਲ੍ਹਦਾ ਹੈ।

:::tip[ਹਰ ਮੀਟਿੰਗ ਲਈ ਇੱਕ ਲਿੰਕ]

ਇੱਕ ਆਮ ਪੰਨੇ ਦੀ ਬਜਾਏ ਉਸ ਮੀਟਿੰਗ ਲਈ ਖਾਸ ਇਵੈਂਟ-ਕਿਸਮ ਦਾ ਲਿੰਕ ਸਾਂਝਾ ਕਰੋ ਜੋ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ। "Intro call" ਲਿੰਕ ਭੇਜਣ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਸੱਦਾ ਪ੍ਰਾਪਤਕਰਤਾ ਸਿੱਧਾ ਸਹੀ ਮੀਟਿੰਗ 'ਤੇ ਪਹੁੰਚਦੇ ਹਨ।

:::

## ਆਪਣਾ ਬੁਕਿੰਗ ਪੰਨਾ ਏਮਬੈੱਡ ਕਰੋ

ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਲੋਕ ਤੁਹਾਡੀ ਸਾਈਟ ਛੱਡੇ ਬਿਨਾਂ ਬੁੱਕ ਕਰਨ? ਆਪਣਾ ਬੁਕਿੰਗ ਪੰਨਾ **ਇਨਲਾਈਨ** ਏਮਬੈੱਡ ਕਰੋ, ਤਾਂ ਜੋ ਇਹ ਤੁਹਾਡੇ ਪੰਨੇ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਦਿਖਾਈ ਦੇਵੇ।

imatic Calendar ਇੱਕ ਛੋਟੀ ਏਮਬੈੱਡ ਸਕ੍ਰਿਪਟ, **`embed.js`**, ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇਸ ਨੂੰ `data-user` ਅਤੇ `data-event-type` ਨਾਲ ਆਪਣੇ ਹੈਂਡਲ ਅਤੇ ਇਵੈਂਟ ਕਿਸਮ ਵੱਲ ਨਿਰਦੇਸ਼ਿਤ ਕਰੋ, ਅਤੇ ਇਸ ਨੂੰ ਆਪਣੀ ਸਾਈਟ ਦੇ HTML ਵਿੱਚ ਉੱਥੇ ਜੋੜੋ ਜਿੱਥੇ ਤੁਸੀਂ ਬੁਕਿੰਗ ਪੰਨਾ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ:

```html
<script
  src="https://calendar.imatic.ai/embed.js"
  data-user="<your-handle>"
  data-event-type="<event-slug>"
  data-target="#book-here"
></script>
```

`data-user` ਅਤੇ `data-event-type` ਲਾਜ਼ਮੀ ਹਨ। ਵਿਕਲਪਿਕ `data-target` ਉਸ ਤੱਤ ਲਈ ਇੱਕ CSS ਸਿਲੈਕਟਰ ਹੈ ਜਿਸ ਵਿੱਚ ਇਨਲਾਈਨ ਫ਼ਰੇਮ ਮਾਊਂਟ ਹੁੰਦਾ ਹੈ; ਇਸ ਨੂੰ ਛੱਡ ਦਿਓ ਅਤੇ ਫ਼ਰੇਮ ਠੀਕ ਉੱਥੇ ਪੇਸ਼ ਹੁੰਦਾ ਹੈ ਜਿੱਥੇ ਸਕ੍ਰਿਪਟ ਟੈਗ ਬੈਠਦਾ ਹੈ। ਸਕ੍ਰਿਪਟ ਤੁਹਾਡੇ ਬੁਕਿੰਗ ਪੰਨੇ ਨੂੰ ਇੱਕ ਇਨਲਾਈਨ ਫ਼ਰੇਮ ਵਜੋਂ ਪੇਸ਼ ਕਰਦੀ ਹੈ, ਅਤੇ ਇਹ ਜਵਾਬਦੇਹ (responsive) ਹੈ — ਇਹ ਜਿੱਥੇ ਵੀ ਤੁਸੀਂ ਇਸ ਨੂੰ ਰੱਖਦੇ ਹੋ ਉਸ ਦੀ ਚੌੜਾਈ ਅਨੁਸਾਰ ਫ਼ਿੱਟ ਹੋ ਜਾਂਦਾ ਹੈ।

:::note[ਆਪਣਾ ਸਹੀ ਸਨਿੱਪਟ ਕਿੱਥੋਂ ਪ੍ਰਾਪਤ ਕਰਨਾ ਹੈ]

ਆਪਣੇ ਹੈਂਡਲ ਅਤੇ ਇਵੈਂਟ ਕਿਸਮ ਲਈ ਪਹਿਲਾਂ ਤੋਂ ਭਰੇ ਸਨਿੱਪਟ ਨੂੰ ਕਾਪੀ ਕਰਨ ਲਈ ਆਪਣੇ ਡੈਸ਼ਬੋਰਡ ਵਿੱਚ ਏਮਬੈੱਡ ਵਿਕਲਪ ਵਰਤੋ, ਫਿਰ ਇਸ ਨੂੰ ਆਪਣੀ ਸਾਈਟ ਦੇ ਪੰਨੇ 'ਤੇ ਉੱਥੇ ਪੇਸਟ ਕਰੋ ਜਿੱਥੇ ਤੁਸੀਂ ਬੁਕਿੰਗ ਵਿਜੇਟ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ।

:::

## ਏਮਬੈੱਡ ਕਰਨ ਦੇ ਹੋਰ ਤਰੀਕੇ

ਇਨਲਾਈਨ ਤੁਹਾਡਾ ਇੱਕੋ-ਇੱਕ ਵਿਕਲਪ ਨਹੀਂ ਹੈ। ਉਹੀ `embed.js` ਸਕ੍ਰਿਪਟ ਕੁਝ ਮੋਡਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦੀ ਹੈ — ਉਹ ਚੁਣੋ ਜੋ ਤੁਹਾਡੇ ਪੰਨੇ ਅਨੁਸਾਰ ਢੁਕਵਾਂ ਹੈ:

- **ਇਨਲਾਈਨ** — ਬੁਕਿੰਗ ਪੰਨਾ ਤੁਹਾਡੇ ਪੰਨੇ 'ਤੇ ਇੱਕ ਕੰਟੇਨਰ ਵਿੱਚ ਬੈਠਦਾ ਹੈ (ਉੱਪਰ)।
- **ਪੌਪਅੱਪ / ਮੋਡਲ** — ਇੱਕ ਬਟਨ ਤੁਹਾਡੇ ਬੁਕਿੰਗ ਪੰਨੇ ਨੂੰ ਤੁਹਾਡੇ ਪੰਨੇ ਉੱਤੇ ਇੱਕ ਓਵਰਲੇ ਵਿੱਚ ਖੋਲ੍ਹਦਾ ਹੈ, ਇਸ ਲਈ ਜਦੋਂ ਤੱਕ ਕੋਈ ਬੁੱਕ ਕਰਨਾ ਨਾ ਚਾਹੇ ਇਹ ਥਾਂ ਨਹੀਂ ਘੇਰਦਾ।
- **ਫਲੋਟਿੰਗ ਬੈਜ** — ਹਰ ਪੰਨੇ ਦੇ ਕੋਨੇ ਵਿੱਚ ਇੱਕ ਨਿਸ਼ਚਿਤ "Book a time" ਪਿੱਲ, ਜਿਵੇਂ ਤੁਸੀਂ ਹੋਰ ਸਾਈਟਾਂ 'ਤੇ ਦੇਖੇ ਬੈਜ ਵਿਜੇਟ।
- **ਕਿਸੇ ਵੀ ਤੱਤ 'ਤੇ ਕਲਿੱਕ ਕਰੋ** — ਆਪਣੇ ਪਹਿਲਾਂ ਤੋਂ ਮੌਜੂਦ ਕਿਸੇ ਲਿੰਕ ਜਾਂ ਬਟਨ ਵਿੱਚ `data-imatic-cal-link="handle/event-type"` ਜੋੜੋ, ਅਤੇ ਇਸ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਨਾਲ ਤੁਹਾਡਾ ਬੁਕਿੰਗ ਪੰਨਾ ਖੁੱਲ੍ਹ ਜਾਂਦਾ ਹੈ। ਕਿਸੇ ਵਾਧੂ ਬਟਨ ਦੀ ਲੋੜ ਨਹੀਂ।

ਸਾਰੇ ਮੋਡ ਇੱਕ **`theme`** (ਲਾਈਟ ਜਾਂ ਡਾਰਕ) ਅਤੇ ਇੱਕ **`primaryColor`** ਸਵੀਕਾਰ ਕਰਦੇ ਹਨ ਤਾਂ ਜੋ ਵਿਜੇਟ ਤੁਹਾਡੇ ਬ੍ਰਾਂਡ ਨਾਲ ਮੇਲ ਖਾਵੇ, ਅਤੇ ਜਿਵੇਂ-ਜਿਵੇਂ ਦਰਸ਼ਕ ਪ੍ਰਵਾਹ ਵਿੱਚੋਂ ਅੱਗੇ ਵਧਦਾ ਹੈ ਇਨਲਾਈਨ ਫ਼ਰੇਮ ਆਪਣੀ ਸਮੱਗਰੀ ਅਨੁਸਾਰ **ਆਪਣੇ ਆਪ ਮੁੜ-ਆਕਾਰ** ਹੁੰਦਾ ਹੈ।

:::note[ਸਹੀ ਸਨਿੱਪਟ ਕਾਪੀ ਕਰੋ]

ਤੁਹਾਡੇ ਚਾਹੁੰਦੇ ਮੋਡ ਲਈ ਤਿਆਰ-ਕੀਤਾ ਸਨਿੱਪਟ ਕਾਪੀ ਕਰਨ ਵਾਸਤੇ ਆਪਣੇ ਡੈਸ਼ਬੋਰਡ ਵਿੱਚ ਏਮਬੈੱਡ/ਸਾਂਝਾ ਵਿਕਲਪ ਵਰਤੋ — ਇਹ ਤੁਹਾਡੇ ਹੈਂਡਲ, ਇਵੈਂਟ ਕਿਸਮ, ਅਤੇ ਵਿਕਲਪਾਂ ਨਾਲ ਪਹਿਲਾਂ ਤੋਂ ਭਰਿਆ ਆਉਂਦਾ ਹੈ।

:::

## ਅਗਲੇ ਕਦਮ

- [ਤੁਹਾਡਾ ਜਨਤਕ ਬੁਕਿੰਗ ਪੰਨਾ](./booking-page) — ਏਮਬੈੱਡ ਵਿੱਚ ਦਰਸ਼ਕ ਕੀ ਦੇਖਦੇ ਹਨ।
- [ਇਵੈਂਟ ਕਿਸਮਾਂ](./event-types) — ਹਰ ਏਮਬੈੱਡ ਪਿੱਛੇ ਦਾ ਲਿੰਕ ਅਤੇ ਸੈਟਿੰਗਾਂ।
- [ਰੂਟਿੰਗ ਫਾਰਮ](./routing-forms) — ਦਰਸ਼ਕਾਂ ਨੂੰ ਬੁਕਿੰਗ ਪੰਨੇ 'ਤੇ ਪਹੁੰਚਣ ਤੋਂ ਪਹਿਲਾਂ ਯੋਗ ਬਣਾਓ।
- [ਡਿਵੈਲਪਰ](./developers) — API ਨਾਲ ਇੱਕ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਸਟਮ ਬੁਕਿੰਗ ਅਨੁਭਵ ਬਣਾਓ।