Skip to main content

The Magnifi Video Widget for JavaScript-Supporting Websites: SET UP GUIDE

Robert Graham
  • Updated

Contents

First Steps/ Registration

  1. Navigate to magnifi.io and Register for a Widget Subscription. Make sure to select your Time zone on the Signup screen!
  2. This will bring you to the Welcome Screen.

mceclip0.png

Widget Preset Configurations 

  1. The Magnifi Widget comes with a series of pre-set configurations, representing several of the most common use cases of the Widget. Each one has an icon or interactive iframe that will be automatically embedded when deployed:
  • 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 5 for more information)
  • Customer Support - Request Meeting: An “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: An “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: An “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.

How to Create a New Widget Configuration

Widget Subscribers can create new configurations of their very own

  1. Click on Widget Management in the left navigational column, then select “+New Widget” from the top right.
  2. Fill out the Widget Name (required). Leave the default-selected “Group” Room Type as it is. You can enter a Widget Description here as well (optional).
  3. Meeting Type: You must choose either Call functionality OR Meeting functionality (not both). Call functionality allows incoming VideoCalls from the public. Meeting functionality creates a group meeting that attendees can be invited to.

 

Call Widget (specific) Options

  1. Members of My Team Who Can Answer Incoming Videocalls refers to additional users (other than the Account Owner) who are authorized to answer Incoming Calls. Leave this field blank for now – it requires us to enter authorized users (referred to as Hosts) on a separate screen.
    • Complete Steps 5-7 below and save your configuration. After the configuration has been saved, navigate to Settings>People Management>Host Management in the left panel. Click on New Host in the top right corner. Fill out the form that appears with the Name, Email Address, and an initial Password (the Host can change it later). Don’t forget to put a check beside “Email Credentials” to ensure each Host is sent their login credentials.

mceclip1.png

    • Click Save when you are done and repeat for as many Hosts as you’d like to include.
    • Navigate back to Widget Management in the left panel and scroll down to the New Widget configuration you created. Under Members of My Team Who Can Use This Widget Configuration you should now be able to enter the first few letters of a Host’s name and then select them from the suggested names. Repeat for as many additional hosts as you’d like.

mceclip2.png

  1. For Incoming Call configurations, you can set how you’d like missed calls to be handled. Calls can be routed to
    • Request a Meeting: Callers will be directed to a Request Meeting form where they can schedule a future meeting with the Host.
    • Leave a Message page: Callers will be directed to a page where they can leave a written message which will be delivered by email to the Host or the Host’s designate.
    • Custom Redirect: Callers will be directed to a specific website of your choice (NOTE: Make sure you have the website URL available while setting up the configuration if you make this choice)

Call & Meeting Widget Options

  1. The rest of the customizable options can be applied to either Call or Meeting type Widgets. You can customize the background and text colours, and the icon/logo associated with the Widget. You can provide users with a Dial-in phone number if they don’t have access to a computer. You can Record your meeting. You can customize the invitation text sent via email from within a meeting. For more detailed instructions on these customizations, please check out the “Show Me How” instructions for Customization on the Welcome Screen
  2. When you have finished configuring your Widget, click Save. (NOTE: All Widget configurations can be edited once they have been saved by clicking on the “Customize” link under Actions for that particular Widget configurations)
  3. Confirm that your new Widget has been saved below the Preset Configurations.

 

Embedding a Widget Configuration on your Webpage

The process of embedding a Widget configuration on your website is the same whether you are using one of the presets we’ve provided, or your own freshly created Widget configuration.

  1. Navigate to Widget Management in the left-hand column and scroll down until you find the Widget you want to embed. In the right-hand column, under Actions, click on Copy Embed Code for that Widget configuration

mceclip3.png

  • For our example, we’ll use one of our presets, the Customer Support “incoming call” configuration, with missed calls redirected to a “leave a message” form.
  1. Paste the code into the body of your html file where you want the Widget to appear. This is what the Widget code looks like:

mceclip4.png

  1. When pasted in, the initial deployment of the Widget will locate the Widget Icon in the lower right or left corner of the page. We recommend you place the Widget in an html container and give that container an ID. Specifying an ID for the Widget in the HTML makes it possible to style the Widget using CSS.

mceclip5.png

  • The specific ID we’ve used for the Widget is <div id=”widget-container”>, which you can see highlighted in the code above (at the top). We’ve completed (closed) the container with a </div> tag, which tells the system it’s reached the end of the container
  • You’ll notice that we’ve placed the ID for the Widget AFTER the initial <script src> tag, but BEFORE the bulk of the Widget (which begins at the <script> tag).

 

Positioning the Widget using CSS

  1. The Widget code contains minimal CSS – if you embed it as is, it will default to the bottom right or left of whatever container it is placed within. It can be styled using CSS.
  • CSS is typically contained within a separate file titled “style.css”. Each item to be CSS-styled is specified, and then parameters are applied to it, using a specific coding grammar.
  • Because each page’s CSS is different, you may find it useful to position the Widget using the CSS Position property, which involves setting an initial position value (in this case: ‘relative’), and then instructing the Widget to position itself ‘25px’ down relative to its original location when ‘position: relative;’ is specified.

                              mceclip6.png

 

Prerequisites and Special Notes

  • For all Customer Support presets, the host can set how missed calls will be handled from within the Widget Admin.
  • For the Customer Support – Request A Meeting preset, the host must set their availability in the Widget Admin interface (see Step 14 for more information)
  • Tips for Small Customer Support Teams

Set How Missed Incoming Customer Service Calls Are Handled

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

mceclip7.png

  • 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

mceclip8.png

  • NOTE: Remember to click SAVE after you finish customizing.

 

Setting Host Availability (before embedding Request a Meeting configuration)

  1. 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”.

mceclip9.png

mceclip10.png

  • Click on the Edit button to make changes, and click Save when you are done. This availability will reflect in the embedded request a meeting form.

 

Tips for Small Customer Support Teams

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

Using the Widget after Embedding

Customer Support Presets & all Call-type Widget Configurations

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

mceclip11.png

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

mceclip12.png

  • Incoming call rings on the Host’s computer and mobile device, there is a pop up box where the Host can click Accept to answer that call. Once the Host accepts the call, the video call between the two parties starts.

                                                                                                                                                     

Instant Meeting Preset

  1. The Instant Meeting preset embeds with the following interactive image

mceclip13.png

 

Schedule Meeting Preset

  1. 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 email. It embeds with the following interactive calendar form:

mceclip14.png

  • This is the confirmation screen that appears after you submit your meeting request:

mceclip15.png

 

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

  1. 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. Once a meeting is scheduled, both parties will receive an .ICS file with the relevant meeting information.

mceclip18.png

 

Other Meeting-type Widgets (Non-Default Configurations)

  • The Host clicks on the Widget icon on the live webpage. (NOTE: Typically this type of Widget would be embedded on a non-public-facing page)
  • A small box will appear overlaid on the icon that says “Create Meeting”
  • The Host clicks on that box to launch the Meeting. Doing so also copies the Meeting Link into the Host’s clipboard.

mceclip19.png

  • The Host can invite attendees via email from within the meeting or by sending the meeting link to invitees via email or SMS.

 



Related articles

Comments

0 comments

Article is closed for comments.

Powered by Zendesk