Calendly-integrated Magnifi Widget (for 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.

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.

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

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

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.

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.

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

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

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.

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.

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. From your Wordpress dashboard, navigate to edit the Wordpress page or post where you'd like the widget to appear. You can use either the basic Block editor in Wordpress or your pagebuilder (such as Divi).

20. If you are using the basic Block editor, open Notepad or a code reader (such as Visual Studio) on your computer, and paste the code you copied in Step 18.

Then add the following line of code BEFORE the Calendly-Magnifi code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Paste the combined block of code into a "paragraph" block and the basic editor will automatically detect it includes Calendly code. The preview should look like this:

Save, and publish.

21. If you are using a Pagebuilder editor (such as DIVI), open Notepad or a code reader (such as Visual Studio) on your computer, and paste the code you copied in Step 18.

Then add the following line of code BEFORE the Calendly-Magnifi code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Open a Code block in the pagebuilder. Paste the combined block of code into the "code" block. In DIVI, it looks like this:

Save the Code Block. In many Pagebuilders the in-edit preview will look blank, but it is not.

Save and/or publish the page. Then navigate to the the list of posts or pages on your dashboard, and click to "Preview" the page. it should look like this: