Voki Tip of the Week: Voki as a Widget on WordPress

Voki Tip of the Week: Voki as a Widget on WordPress

by Ashley Chaney

Question: I noticed the nifty avatar on your blog. How do I make Voki appear as a widget on the sidebar of my WordPress blog??

Answer: There are a few ways to do it. In this post, we’re going to walk you through one of the easier ways. Below, we show you the easiest way to make your Voki widget work without using a third-party. You’re only minutes away from having a Voki greeting on your WP homepage, ready to greet your readers!

Using Voki’s Embed Code

1. Open a Word document or other text editor.

2. Log in to Voki and WordPress.

3. In WordPress, go to the “Appearance” tab, and select the “Widgets” option.

4. Look at your widget options. Choose the “Text” widget and drag it to the sidebar display of your choice.

5. Now, in My Voki, select your Voki of choice, and click “Publish your Voki.”

6. Copy the entire embed code.

Copy the Voki Embed Code

7. Paste the code in your open Word document.

Paste the Voki Embed Code into a Word Doc

Okay! Good job, we have made it this far. Let’s pat ourselves on the back and take a couple of breaths before we move forward. Inhale, exhale. Inhale, exhale…

Almost there! Now for the finishing touches…

8. In the Word doc, highlight the source code, or “src” code. This can be found by locating src= and highlighting the hyperlink that is in between the quotation marks (it’s a pretty long link, so make sure you copy everything in between the quotation marks). See the example below.

9. To make sure you copied the link correctly, paste the highlighted link into your internet browser (but not this window or tab!) and press Enter. Your Voki should appear on the page in full screen (pretty cool!).

10. Paste the long link you highlighted in the code below, where it says [YOUR-CODE] (make sure the brackets come out, and the quotes remain):
***Text version of the code can be found in the comments section towards the end.***

11. Copy and Paste your new embed code from the Word doc, into the WordPress Text box (and click Save).

12. Check out your blog! Your Voki should be happy to greet you!

TIP: If you don’t see the Voki, and you’re certain you followed the steps correctly, try clearing your browser’s cookies and cache, and reopening the page.

For those of you with WordPress blogs, we hope this helps you out! If you know of an (even) easier way to make Voki work with WordPress, please share it with us below in a comment!

And, if you have any ideas for future Voki Tip of the Week posts, feel free to share them below, and we’ll add them to the list!

Until next time,

The Voki Team

http://www.voki.com

Have you seen Voki Classroom?
Check out the new Voki classroom management system, and the intro video, right here.

24 thoughts on “Voki Tip of the Week: Voki as a Widget on WordPress”

    1. Hi Ms. F.

      As long as you have logged on to WordPress and gone to the dashboard of your blog, the instructions we have provided above should work.

      Did you follow the instructions in this post?

      Let us know!

      The Voki Team

      Like

      Reply

      1. I am logged in at WordPress, I have a new blog post open, I have my dashboard open. It says: “Post failed – please set up a blog”. I could send you a print screen if I had your email address.

        Like

      2. I understand where you are having your problem. Unfortunately, publishing your Voki to WordPress from the Voki website is not possible and you must take the above steps to post to your WordPress site. If you would like to publish your Voki as a post rather than a widget, follow the instructions above but use the modified embed code in a “post” rather than in the “text” widget.

        Let me know if you have any other questions.

        The Voki Team

        Like

  2. In step 10 above, are we supposed to plug in our website into the code you provide:

    [gigya width=”315″ height= …. etc.?

    Is that “gigya” code supposed to appear on the oddcast site? The long web address you show isn’t complete and it is not a link. What do we do when we get to oddcast? All I see is a list of Vokis I’ve made.

    Thanks again,
    d

    Like

    Reply

  3. Hi, I am doing a project for my ELA teacher using a web 2.0 tool. I choose Voki, but i want to put multiple avatars on the same page, but is that possible to do? Can you put it on a Word Document? and also if not, What should I do? I have 2 days till I present, and i need a clue on where to put the avatars, and how to do it!!

    Like

    Reply

  4. I am having alot of trouble trying to get my voki published on my WordPress site as a widget!!! When I get my embed code for my Voki and search for the src= code, I have two sections that have an src= code. I have tried copying one and then the other. then all! Can you help me? I really want to put this Voki on my blog…
    I am not getting it.

    Like

    Reply

  5. Yes, why is Step 10 a photograph. I can’t cut and paste the code that way. I tried typing it in but it’s not working. I would avoid any mistyping if you just put the code up there in text.

    Like

    Reply

    1. Hi There,

      Your absolutely right that the text rather an image should have been included. Here it is: [gigya width="315" height="236" src="YOUR-CODE" quality="high" wmode="transparent" allowfullscreen="true"]

      I also updated the blog.

      We are working on an improvement to this feature which will be launched around May 22, 2012.

      Thanks for your feedback!

      Like

      Reply

    1. Hi Ms. Kuipers,

      Sorry to hear your having trouble with the WordPress directions. This has been a tricky tool for others as well. We are working much better tool for embedding in WordPress – it should be available on voki.com in a few days, so keep a look out.

      Best,
      The Voki Team

      Like

      Reply

  12. I followed these directions in the past and was successful in embedding my voki in my blog. Then, it seemed to malfunction (after over a year of it working correctly). I have followed the directions over and over and can not get it to work. I have been obsessive in reviewing the code for the tiniest error .. nothing. PLEASE HELP! I have literally spent about 2 hours on this!!!! serp513.weebly.com

    Like

    Reply

      1. Hi Phyllis,

        I’m not seeing the section that you wanted to add the Voki to. Can you send me a link to your Voki so I can take a look at it?

        Best,
        The Voki Team

        Like

  13. Hello! I tried to do this but the widget doesn’t show. Furthermore I wanted the Voki to be in a post, in a specific section of the blog. How can I make it? this code does not work in posts either:

    [gigya width=”315” height=”236” src=”http://vhss-d.oddcast.com/vhss_editors/voki_player.swf?doc=http%3A%2F%2Fvhss-d.oddcast.com%2Fphp%2Fvhss_editors%2Fgetvoki%2Fchsm=438ec0a9317d63da0df546febf126428%26sc=11248310” quality=”high” wmode=”transparent” allowfullscreen=”true”]

    Liked by 1 person

    Reply

Leave a comment