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.)

      { "calendly":"<CALENDLY LINK>", "prefill": { "name":"{{name}}", "email": "{{email}}", "customAnswers": {} }, "utm": {}, "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.

You can change replace value of theme color with any other hex code of color

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

      { "calendly":"<CALENDLY LINK>", "prefill": { "name":"{{name}}", "email": "{{email}}", "customAnswers": {} }, "utm": {}, "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.

You can change replace value of theme color with any other hex code of color

Last updated