- First Steps/Installation/Registration
- Widget Preset Configurations
- Embedding the Widget on WordPress
- Prerequisites and Customizations
- How-To (Basic Customizations)
- Change Meeting Room and Lobby Background and Text Colours
- Customizing the Widget & Meeting Room Icon.
- Set Recording and Dial-In Options
- Set How Missed Incoming Customer Service Calls Are Handled
- Setting Host Availability (before embedding Request a Meeting configuration)
- Using the Widget after Embedding
- Customer Support Presets
- Instant Meeting Preset
- Schedule Meeting Preset
- Request a Meeting Preset
- Tips for Small Customer Support Teams
1. Install the WordPress Plugin. You can install the Plugin in two ways:
- Visit https://wordpress.org/plugins/magnifi-widget/ to download the Zip file. Then, on your WordPress dashboard, navigate to Plugins/Add New. Select “Upload Plugin”, choose the Zip file you just downloaded, and click on “Install now”. When installation is done, click “Activate”.
- OR within your WordPress Dashboard, navigate to Plugins/Add New. Search by keyword for “Magnifi”, then click “Install Now” on the Magnifi Widget. Once installed, navigate to Plug-ins, scroll to find the Magnifi Plugin, and click on “Activate”
2. Navigate to the Magnifi menu option in the left panel of your WordPress Dashboard.
- If you are not yet a Widget user, click on the link at the bottom: Don’t have an account? Register. Registration includes signing up for a Widget Subscription, which is required to use the Widget.
- If you already have a Widget Subscription, sign in here using your email address and password.
3. Once you have signed up for a Widget Subscription, return to the Magnifi tab on your WordPress Dashboard. Use the email and password you used for your Widget Subscription to Sign in on this tab. The Plugin will then download the full slate of Preset Widget Configurations to your WordPress account.
Widget Preset Configurations
4. The Magnifi Widget WordPress Plugin comes with pre-set configurations. Each one has an icon or interactive iframe that will be automatically embedded:
- Instant Meeting: Open a video window and invite attendees via SMS or email. This meeting takes place immediately.
- Schedule Meeting: As meeting host, book a video meeting for a future date and time, and invite a group of attendees via email.
- Request Meeting: Embed a public facing calendar on a webpage with a date & time selector. Clients/customers can use that calendar to request a future video meeting with a host. This option uses email only. (NOTE: Requires Account Host to set their Availability before using. See Step 15 for more information)
- Customer Support - Request Meeting: A customizable “incoming call” style configuration that allows people to call your staff for customer support. Missed calls are routed to a Request Meeting page where the caller can schedule a follow-up meeting with Customer Support at a time convenient for both.
- Customer Support - Message Form: A customizable “incoming call” style configuration that allows people to call your staff for customer support. Missed calls are routed to an online form where the caller can leave a typed message which will be delivered via email to the appropriate staff member.
- Customer Support - Redirect: A customizable “incoming call” style configuration that allows people to call your staff for customer support. Missed calls are routed to a specific webpage set by the meeting host.
Embedding the Widget on WordPress
5. Each Preset Configuration has a shortcode. The shortcodes are how you tell WordPress where to embed the Widget on the site, and which Widget to embed. Copy the shortcode for the Widget you’d like to embed.
6. On your Dashboard, navigate to the Page or Post where you’d like to embed the Widget.
- You can drop the shortcode for the Preset Configuration in a code block or a paragraph block. Below left is an example of a shortcode typed into an Edit block in WordPress.
- To the right is that same page as it looks once published, with the Preset Configuration of the Widget deployed and ready to use.
7. Widget location within a block can be further adjusted using Custom CSS. The ID for a Widget Preset Configuration is “widget-preset-x” (where x = the widget number assigned by WordPress on the Magnifi screen). In our example above, we used [magnifi preset=6] so the ID for that Widget for CSS purposes would be “widget-preset-6”
Prerequisites and Customizations
8. Preset configurations include customization options which can be set in the Widget Admin interface. These customizations include:
- Background colour of the Video Meeting and Lobby
- Text colour of the Video Meeting and Lobby
- Logo that will be shown in the meeting lobby and room
- Recording calls
- Providing a dial-in number for meeting attendees who do not have access to a computer
- For all Customer Support presets, the host can set how missed calls will be handled
- For the Customer Support – Request A Meeting preset, the host must set their availability in the Widget Admin interface (see Step 15 for more information)
How-To (Basic Customizations)
9. Navigate to https://widget.magnifi.io/ and sign in using your Widget Subscription credentials. After you sign in you will see the Welcome Screen.
10. Click on the Unlock My Design Skills button lower left section of page. This will take you to the Widget Management Screen where each of your Preset Configurations are listed. To perform Basic Customizations, choose the Preset Configuration you’d like edit and click on Customize under Actions.
Change Meeting Room and Lobby Background and Text Colours
11. This will open the Edit view of the specific Preset Configuration. Scroll down until you come to the Settings section, where you can customize Meeting room Background and Text colours:
Both of these options can be adjusted using a colour selection tool. User can enter the RGB codes for a colour, or choose a colour visually using the pointer and sliders.
Customizing the Widget & Meeting Room Icon
12. Each preset comes with a default icon option selected, plus options. The icon represents what element or specific piece of functionality you are able to use or conversely, you may upload your own (such as a company logo or other type of key brand element). The window below is how the logo selection appears in the application.
To upload your own icon or logo, select a .JPG or .PNG file, with a maximum file size of 5MB. You can choose one of three sizes/aspect ratios to upload (NOTE: if the aspect ratios of your logo and the original image do not match, the system will compress your image to fit the aspect ratio of the original image file. We suggest editing your image to ensure the aspect ratio remains correct)
- 50 x 50 pixels: The image must be square with a 1:1 aspect ratio
- 114 x 29 pixels: This image must be a horizontal rectangle with a 114:29 aspect ratio
- 100 x 100 pixels: The image must be square with a 1:1 aspect ratio
Click on the Upload button that corresponds to the size and aspect ratio of your image, then select the file you wish to upload. Once uploaded, the system will show you a preview of how your image will look.
The image you choose will appear as the Widget “button” the User clicks on to activate, this image will also appear at the top of the Lobby and Meeting Rooms.
NOTE: Icon customizations can only be applied when the user is embedding Widgets using the Embed Code copied from the “Widget Management” screen. Iframe Embed codes (Copied from the “Groups” screen) do not feature customizable icons. To fully customize your Widget deployment, please use the SDK (Software Development Kit).
Set Recording and Dial-In Options
13. Scroll further down the Edit screen until you see a series of options with empty Checkboxes.
- To record the meeting, place a check in the Record Meeting
- Meeting recordings will be automatically saved in the Widget Administration under Meetings/ Past Meetings
- To ensure users without access to a computer can participate, place a check in the box beside Provide Dial In Number For Calls
Set How Missed Incoming Customer Service Calls Are Handled
14. Right below the Recording Options are the Missed Call Options. Each of the three Customer Support Presets have the appropriate option preselected, so you don’t need to change that.
However, the Customer Support – Custom Redirect preset requires that you provide a webpage URL. We’ve autofilled it with our website (https://magnifi.io), but you should replace that with the URL of the webpage you like your callers to be directed to in the event of a missed call.
NOTE: Remember to click SAVE after you finish customizing.
Setting Host Availability (before embedding Request a Meeting configuration)
15. In order for the Request a Meeting configuration to function properly, the Host must first set their availability in the Widget Admin interface. Sign in at https://widget.magnifi.io/, then navigate to Settings/Availability. The settings default to “Unavailable”.
Click on the Edit button to make changes, and click Save when you are done.
Using the Widget after Embedding
Customer Support Presets
16. To use a Customer Support preset configuration:
- The Host must have the Widget Admin open in a tab on their computer, and be signed into the Widget Admin interface to receive a call. Missed calls will be handled as specified by the preset.
- The caller clicks on the Widget icon on the live webpage.
- A small box will appear overlaid on the icon that says “Video Call Us Now.”
- The caller clicks on that box to launch the Video Call.
- Caller enters a name of their choice in the Name popup, and clicks on Start Call.
Instant Meeting Preset
17. The Instant Meeting preset embeds with the following interactive image
Schedule Meeting Preset
18. The Schedule Meeting preset is intended to be embedded on an internal or password-protected page, allowing the Host to book a video meeting for a future date and time, and invite a group of attendees via SMS or email. It embeds with the following interactive calendar form:
This is the confirmation screen that appears after you submit your meeting request:
To invite attendees:
- Selecting "Send Meeting Details to me in an ICS file via email" will forward an email message with the meeting details along with an attached ICS file.
- Selecting “Download Meeting Details in an ICS file now” will download the same ICS file.
- Import the ICS file into your calendar program. Once the ICS has been imported and the meeting has been added to your calendar, you may edit the meeting and add participants.
Request a Meeting preset
19. The Request a Meeting preset embeds a public-facing calendar on a webpage with a date & time selector. Clients/customers can use that calendar to request a future video meeting with a host. This option uses email only. NOTE: Host must have set their weekly availability (Settings/Availability) to use this form. It embeds with the following interactive calendar form:
Tips for Small Customer Support Teams
20. For smaller customer service teams, we suggest designating a generic “Customer Support” email address as one of your 10 Hosts, and having each of your Customer Service representatives sign in as that Host when they are “on-shift” to answer video calls.
If you require further customization or more advanced functionality, please install the Magnifi Widget using the SDK.