Skip to main content

Calendly-integrated Magnifi Widget (for applications and HTML sites)

Robert Graham
  • Updated

Notes:

These instructions do not apply to embedding a Calendly-Magnifi Widget on Wordpress.

Steps:

1. If you don’t already have a Calendly account, create one. The free Calendly account will work with this integration

2. Login to your Magnifi Widget account at https://widget.magnifi.io/. Remember that your login for Magnifi videoconferencing is not the same as your Widget login.

3. On the left navigation panel, select Calendaring > Calendly Integration. This will bring up the Calendly Integration page.

mceclip0.png

4. There are several formats a Calendly-integrated Magnifi Widget can have

    • Inline Embed Widget (loads your Calendly scheduling page directly to your website or application)
    • Popup Widget (adds a floating button to your site that launches Calendly as a popup)
    • Text Link Popup (adds a text link to your site that launches Calendly as a popup)

5. For these instructions we will use the Inline Embed Widget as our primary example. Notes on how to generate and embed the other formats are included in the instructions as well.

6. On the Magnifi Widget/Calendly Integration page, in the Calendly calendar type field, select the first option, “Calendly Widget – Inline Embed, Popup Widget, & Popup Text”

7. Below that, select the Magnifi Link Widget which you’d like to Integrate Calendly with. In our example, we’ll use the Meeting Widget.

    • If you have not yet created a Widget to use, go to Widgets in the left navigation panel, and create a Link Widget for your Calendly integration.

mceclip1.png

8. Go to your Calendly account and navigate to Event Types.

mceclip2.png

9. Select the Event you’d like to integrate with your Magnifi Widget. For our example, we’ll be using the 30-minute “Consult with Jennifer” event. Click on the event to adjust its settings. Click on “What event is this?” to access the main settings for the event

mceclip3.png

10. Scroll down to Location and set it to “Ask Invitee”. This will allow the Widget to enter the videoconference link in the Location field. Then click Save & Close to save your settings.

mceclip4.png

11. Click on the BACK button to return to the main Event Types page.

12. Click on the gear icon to access Options for the Event you will be integrating with the Magnifi Widget.

13. Select </> Add to Website, which will bring up a Popup asking you to choose how you want to add Calendly to your site.

mceclip5.png

14. For our example, we’ll be choosing Inline Embed.  Then select Continue to proceed.

mceclip6.png

  • If you want your Magnifi/Calendly widget to be a floating button that launches the widget as a pop-up, click on Popup Widget instead of Inline Embed. The rest of the instructions are the same.
  • If you want your Magnifi/Calendly widget to be a text link that launches the widget as a pop-up, click on Popup Text instead of Inline Embed. The rest of the instructions are the same.

15. On the Inline Embed screen click on the COPY CODE button to copy the Calendly Embed Code (you don’t need to highlight it first, just click the button).

mceclip7.png

 

16. Return to the Magnifi Widget Calendly Integration page and paste the Calendly embed code in the field on the lower left, then click Generate Modified Embed Code to create the Magnifi version of the code in the right field.

mceclip8.png

 

17. Once you click on the Generate Modified Embed Code button the new code will appear in the Modified Calendly embed code field to the right.

mceclip9.png

 

18. Click COPY TO CLIPBOARD. This is the code you will embed in the HTML of your Website or Application to embed your Calendly-integrated Magnifi Widget.

 

19. To demonstrate embedding the Inline-Embedded Calendly/Magnifi Widget, we’ll use Codepen.io (https://codepen.io/pen). Paste the modified embed code into the HTML of your website or application, and the widget will appear in the lower half of the screen. Similarly, you would past the modified embed code into the HTML of your website where you want the Calendly/Magnifi Widget to appear. Widget styling on the page can be adjusted using CSS.

mceclip10.png

 

20. You can see that the Inline Embedded version of the Calendly/Magnifi Widget loads the Calendly scheduling interface onto the page.

21. To use the Calendly/Magnifi Widget, the process is very similar to booking a meeting through Calendly.

  • Member of the public selects a date from the available displayed dates, then a time, and clicks on the CONFIRM button.

mceclip11.png

  • This opens the Details pane, where the user adds their Name and Email address to the form. They may also include a note in the bottom field regarding the purpose or context of the meeting. The Location field will be auto-filled by a Magnifi Meeting link, which will generate a video call when clicked.

mceclip12.png

  • Click SCHEDULE EVENT to finalize the booking. It will be automatically entered into the Host’s Calendly calendar and an email invitation will be sent to the booking user’s email address

mceclip13.png

 

Comments

0 comments

Article is closed for comments.

Powered by Zendesk