# How to integrate calendly for meetings

### Steps for Web playbooks using webview

Below are the steps. Before starting please have a calendly link for your meetings ready. It will look like <https://calendly.com/\\><calendly username>/15min

1. Go to AI builder from left Menu, and select a playbook where you would like to have a node for meetings.
2. Create a Webview Node. After creating click on edit button for the same node.
3. Use the following properties while editing.

   1. Text message: Write any text message relevant to users. For example "What time you would like to have a meeting with us?"
   2. Webview title: Write any title such as "Book a meeting"
   3. Webview Template URL: It should be "<https://webview.intelliticks.com/common/calendly.html>" If you would like to customize the view, you can download html source of this URL, modify it and paste updated URL.
   4. Req Body: Paste the code below after replacing calendly link.(replace `<CALENDLY LINK>` with actual calendly link. prefill parameter is sent to calendly so you can customize it as per calendly docs and you can also pass the `theme_color` value to seamlessly fit the appearance of the web-view buttons with the chat bot.)

      `{`\
      &#x20; `"calendly":"<CALENDLY LINK>",`\
      &#x20; `"prefill": {`\
      &#x20;   `"name":"{{name}}",`\
      &#x20;   `"email": "{{email}}",`\
      &#x20;   `"customAnswers": {}`\
      &#x20; `},`\
      &#x20; `"utm": {},`\
      &#x20; `"theme_color": "#00a2ff"`\
      `}`
   5. Webview Display Mode: Select FULL. You can try different options and see which one looks good.
   6. Action Button Text: Write action button text(User has to click on this button to open webview) such as "Click here to book a meeting"

   Save the above and you can test the flow.

{% hint style="info" %}
You can change replace value of theme color with any other hex code of color
{% endhint %}

### Steps for facebook playbooks using webview

Below are the steps. Before starting please have a calendly link for your meetings ready. It will look like <https://calendly.com/\\><calendly username>/15min

1. Go to AI builder from left Menu, and and select a playbook where you would like to have a node for meetings.
2. Create a Webview Node. After creating click on edit button for the same node.
3. Use the following properties while editing.

   1. Text message: Write any text message relevant to users. For example "What time you would like to have a meeting with us?"
   2. Webview Template URL: It should be "<https://webview.intelliticks.com/common/messenger/calendly.html>" If you would like to customize the view, you can download html source of this URL, modify it and paste updated URL.
   3. Req Body: Paste the code below after replacing calendly link. prefill parameter is sent to calendly so you can customize it as per calendly docs

      `{`\
      &#x20; `"calendly":"<CALENDLY LINK>",`\
      &#x20; `"prefill": {`\
      &#x20;   `"name":"{{name}}",`\
      &#x20;   `"email": "{{email}}",`\
      &#x20;   `"customAnswers": {}`\
      &#x20; `},`\
      &#x20; `"utm": {},`\
      &#x20; `"theme_color": "#00a2ff"`\
      `}`
   4. Webview Display Mode: Select FULL. You can try different options and see which one looks good.
   5. Action Button Text: Write action button text(User has to click on this button to open webview) such as "Book a meeting"

   Save the above and you can test the flow.

{% hint style="info" %}
You can change replace value of theme color with any other hex code of color
{% endhint %}