Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil...

17
Version 3.1 1 Embedding Voki Into Different Platforms Table Of Contents About this document 2 A - Blogger 3 B - Canvas LMS 5 C - Google Site: 7 D - Smart Notebook 10 E - WordPress: 12 F - Padlets 14 G - Moodle 16

Transcript of Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil...

Page 1: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 1

Embedding Voki Into Different Platforms

Table Of Contents

About this document 2

A - Blogger 3

B - Canvas LMS 5

C - Google Site: 7

D - Smart Notebook 10

E - WordPress: 12

F - Padlets 14

G - Moodle 16

Page 2: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 2

About this document

Typically embedding your Voki Scene into a web page is a simple matter of copy paste. Copy your Voki embed code from your Voki "Publish" area, and paste it into the html document which is your web page.

But some popular platforms or programs may require an extra step or two - and the procedure may not be obvious.

Please bear in mind that programs are frequently updated, and the instructions you see here will also need to be updated from time to time. Though we make every effort to do so, if you see outdated instructions - please let us know.

If the tool/program that you are using is not on this list and you believe it should be - please let us know.

Question or comments? email us at: [email protected]

Page 3: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 3

A - Blogger

Step 1: Select HTML button from the Editor

Step 2: Goto Voki Account and copy the Embed Code:

Step 3: Paste the Embed code into the HTML Editor within <BODY> Tags -

Page 4: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 4

Step 4: Click on Save and Publish-

URL: https://test98121.blogspot.com/2019/10/blog-post.html

Page 5: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 5

B - Canvas LMS

Step 1: Click on HTML Editor:

Step 2: Goto Voki Account and Copy Deprecated Embed Code.

Step 3: Paste the Embed Code into the HTML Editor:

Page 6: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 6

Step 4: Click on Save. Make sure Adobe Flash is allowed for Canvas.

Page 7: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 7

C - Google Site:

Step 1: Click on Insert >> Embed code

Page 8: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 8

Step 2: Goto Voki Account and copy the Embed Code:

Step 3: Insert the embed code into HTML Editor within <body> tags-

Page 9: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 9

Step 4: Click on Update

Page 10: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 10

D - Smart Notebook

1. Go to SMART

Exchange: http://exchange.smarttech.com/ and login. If you don’t have a login on SMART Exchange, you will need to sign up before you can download lessons, widgets, and more. In the search box, type Voki.

2. Download the voki widget. It will be put into the Gallery in “My Content” – Interactive and Multimedia.

3. In Notebook 11, open a new page, drag the Voki Avatar widget onto the page from “My Content” - Interactive and multimedia.

4. Go to http://www.Voki.com, login to Voki, and create an avatar.

5. Publish your Voki. Click in the box under Embed code or click on the Copy button. The code is selected and copied.

6. Go back to your Notebook page with the Voki widget. Click in the white box and Paste your Voki code from Voki.com into the box on your Notebook page. Hint: Use your keyboard shortcut (CTRL V for Windows users) to get your code copied into the widget vs. onto the screen.

7. Click go. If you are connected to the Internet, the Voki will begin to animate. You can move it around the page. You can also resize it. As you move your mouse, notice the Voki’s eyes are following it. Use the play button to start speaking. Have fun!

8. Additional Resources:

Page 11: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 11

9. Voki Lesson Plan Database - http://www.voki.com/lesson_plans.php

10. Links to the Teacher’s Corner, tutorials, Voki Newsletter, and more – http://www.voki.com/learn.php

11. How to become a better presenter by using Voki Avatars - http://edudemic.com/2013/03/how-to-become-a-better-presenter-by-using-voki-avatars/

Page 12: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 12

E - WordPress:

1: Click on WordPress from Share Options:

2: Enter your Domain name or Webpage URL:

3: Enter WordPress username and password:

Page 13: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 13

4. Click on the image:

Page 14: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 14

F - Padlets

Copy the Pickup link under embed options (Use Full length URL)

After Logging into Padlet, Click on "New Padlet".

Click on Add Attachment

Select “Link from Web” and paste in your Voki URL:

Page 15: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 15

Click Submit and your Padlet with Voki is ready :

Page 16: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 16

G - Moodle

Step 1: Copy the Deprecated Code from the voki site.

Step 2: Go to Moodle, Select the Course and click on Edit Section

Page 17: Voki Embed Instructions v3.1 · Microsoft Word - Voki Embed Instructions v3.1.doc Author: gil Created Date: 12/1/2019 1:07:12 PM ...

Version 3.1 17

Step 3: Select the HTML option, Paste the Deprecated Code

Ste4: Click on Save Changes