D2CDesire2Connect

Virtual Office Widget Creator

The virtual office widget creates an easy-to-use portal which allows students to connect with your virtual office on Zoom through their course shell on D2L. The virtual office hours widget creator walks you through the process of creating this tool without having to do any of the coding that would normally be required to develop it on your own.

Creating a Title

Every good widget needs a title that communicates its purpose. In this case you are creating a widget to link students to your virtual office. Use the following textbox to add an appropriate title to the example widget that is being generated based on your input.

Finding your D2L User Identification Number

Every individual with access to D2L has their own unique user identification number. Use the steps below to find your unique number.

1. Log in to D2L.
2. On your D2L homepage, locate the My Settings panel and click on Profile
3. Locate your name. Directly under your name is your profile image. If you are still using the default profile image this would be a good time to update it. Since the widget we are creating will use your D2L profile image, it should automatically update whenever you change your profile image.
4. You need to copy the address of your profile image.
• Chrome: Right click on your profile image and select Copy Image Address.
• Edge: Right click on your profile image and select Copy Image Link.
• Safari: Right click or Control+Left Click and select Copy Image Address.
• Firefox: Right click on your profile image and select Copy Image Location.
5. Paste this address into the following Your User Identification Information textbox.

Linking to your virtual office

The next step is to connect your widget with your virtual office on Zoom.

1. Log into your Zoom profile.
2. Locate your Personal Meeting ID and click Show
3. You may also choose to set up a recurring meeting by clicking on Meetings and then Schedule a New Meeting.

Specifying your availability

The final piece of information your widget needs is an indication of when you will be available in your virtual office. You can click the plus button to add an additional line to your office hours.

Copying the Code

All your work so far has produced the code you need to make your widget. All you need to do is click the copy button to move on to the final step.

Creating your widget

Now that you have the code for your widget you can create it and add it to your D2L course shell with a few final steps.

1. In your D2L course shell click on Edit Course.
2. In the list of course administration tools click on Widgets
1. If you are viewing this list by category, Widgets is the last option in the Site Setup category.
2. If you are viewing this list by Name all options are listed alphabetically.
3. Under the button to Create Widget ensure that the Custom Widgets tab is selected.
4. Click on Create Widget.
5. Give your widget a name like "Virtual Office Hours"
6. Click on the Content tab
7. In the lower right hand side of the contents text area locate and click on the </> icon
8. The HTML source editor will open. Paste your code into the text area and click Save
9. You should see a very large preview in the content area. It will very likely appear messed up, but you can click Preview Widget to see your widget at the correct size without display errors.
10. Click Save and Close.
11. In your custom widget list you should see your widget title. Click on the paintbrush icon to the right from your widget.
12. The widget settings are now displayed. Uncheck Display a title and ensure that both Display widget container style and Prohibit minimizing widget are checked
13. Click Save.
14. Click on the Homepages tab above the Create Widget button.
15. Under the Create Homepage button there is a dropdown menu for your active homepage. If you are using the course default homepage you must follow the next three steps, otherwise select homepage indicated by the dropdown and proceed to step 16.
1. Find and click the downward facing arrow next to "Course Default" and select Copy.
2. Click on Course Default - Copy. If there are two copies you should only be able to select the instance that has "Shared but not used" to the right.
3. Update the name to something you will remember like your last name followed by "homepage".
16. Find the drop down menu associated with type and make sure that it is set to Widget-based.
17. Locate the widgets area. The default widgets area consists of a larger column to the left and a smaller column to the right. While the office hours widget may be placed in either column, it was specifically designed to be placed in the smaller column to the right.
1. Locate the smaller column to the right.
2. At the bottom of this column under any existing widgets click on the Add Widgets button.
3. An Add Widgets overlay will appear.
4. Click on the filter for Custom Widgets.
5. Select your Virtual Office Hours widget.
6. Click Add.
7. If you click and drag the area labeled Virtual Office Hours you can resposition it to the top of the column you have placed it in.
18. Click Save and Close
19. You are back at the list of homepages. At the top of the list just below the Create Homepages button is a drop down menu that allows you to select your active homepage. Click the menu, select your homepage, and click Apply.
20. Click the Course Home link to see your new office hours widget.