*This page is a tech demo for an old project of mine – a WordPress plugin that lets you build a pet for your website. Built with JS & jQuery.

< Back to website

*Some functionality is disabled in demo. (Save, Delete, Activate)

WEBSITE PET BUILDERby wickedpixel

Show notifications, messages or make and display animations to your site visitors using a tiny virtual pet.

Presentation

A Virtual Pet that can be used to display various forms of messages and animations


Can be used to:

  • Display messages : News, notifications, cookie use, site features.
  • Site Guide : The Pet can walk to certain page elements and display special animations and messages near them. Good to point new site features or highlight things. Like a real Tour Guide.
  • Build your own site mascot: using your design and graphics.


Features:

  • Build your own pet with your own animations.
  • Pet Modes - Set animations to be used depending on pet actions/mode
    • Stationed
    • Walking
    • User Drag
    • Talking
    • *Special
  • Quickly add messages.
  • Use one of the already present presets.
  • Pet will use any number of animations you will add to it.
  • Save, import or export pet code that contains all the animations.
  • Lots of options to control the Pet behaviour and type.


BLUEPRINT:

ANIMATION EDITOR

Animation Name Animation type Frames
Preview This Animation LEGS EDITOR
Legs Position & Preview
Legs Settings Use the button "Legs Editor" from Bottom-Right of the stage to edit the legs model and position them.
Edit Elements COLOR & TRANSPARENCY: Clone Element Delete Undo
ELEMENT ORDER
Move to front or to back an element inside a frame. For design or to facilitate element selection.
CREATE ELEMENTS ADD SHAPE
Text Font ADD IMAGE, TEXT OR HTML CODE.
IMAGES: add an image url so you can add an image in the frame. Ex: http://www.site.com/image.png
TEXT: Add your text, with line breaks, and set the font for it.
Replace Selected Element
With this you can replace the content of the selected element but will keep his attributes (position, color, size).
Note: It will replace all the instances it finds with the same content type.
This section lets add new elements inside frames.

You can use the Shape Library or add custom elements with the Custom Element input field.

To add images, simply add an image url inside the Custom Element field and click Add.

Click on an icon to add it in the Frame.

Shape Added!



MESSAGES TO SAY

Add Message Add items at the beginning.

MESSAGE     Font:   Font Size:   Bold :   Color :
URL: Open Link: (Optional - Add a link to this message.) DELETE


TEXT MESSAGES OPTIONS

Offset the Text Message Bubble relative to the pet. Values in numbers. Will be used as pixels.
Offset the Text Message Bubble relative to the pet. Values in numbers. Will be used as pixels.
The probability of the pet to show a text message. Values from 0 to 1. Default is 0.4.

ADVANCED OPTIONS

Enables the pet to auto-scroll your screen to follow the pet.
Play the special animations at the beginning without doing other random behaviours(like random walking on screen, or displaying simple messages).
The delay after which the pet will appear on screen. Value in milliseconds. 1sec = 1000ms.
Default Vertical CSS Positioning. Can be set in percent or pixels.
The horizontal portion of the screen to be used by pet for random walks. Values from 0 to 1. Default 0.4 (that means 40% of the screen width).
Allows the pet to jump on screen to different vertical positions.
Add here a page element ID (use '#' character or other selectors needed), in which the pet to appear and stay.
The pet will have absolute positioning at the bottom of the container, will not jump and it will walk only on container width.
Note: Use this only if the Pet has not Special Animations that have a target element.
Leave blank for default use.
CSS positioning for the pet. Absolute and Fixed work the best. "Relative" positioning is present just as a choice and is not tested.
Enable this if you want this pet to be visible only on homepage.
Add here links only on pages you need the pet to appear. Leave blank if you have no such wish. You can add multiple page urls, sepparated by comma.
You can use only parts of the page url. Example: /shop, contact_page
Allows users to hide pet and keep it hidden with the help of a browser cookie.
The amount of time the pet will think about before chosing the next move/action.
Minimum screen size on which the pet to be visible. If the screen is smaller than this, the pet will be hidden. Good for mobile.

Code Export / Import

IMPORT CODE
Here is the code generated by the editor. Yuu can take it and save it, place it in what web-page you need the pet or you can place here an older save and import it.
How It Works
Every Animation is composed from one or multiple Frames.
Every Frame contains elements that have certain properties that will be used in animations. Position, size, color, transparency.
Some elements can appear in multiple frames, others only on certain frames.

Animations use:
The existent animations can be selected to be a certain type. An animation will be used depending of his type.
Example: If you set an Animation to be "Drag Animation" = that animation will be displayed when the Pet is dragged by the user on screen.

Animation Types:
- all : The default animation type, will be used if the Pet does not have the type required for his action.
- stationed : will be displayed when pet is paused on screen.
- walk : will be displayed when pet walks.
- message : will be displayed when displays a message.
- drag : will be displayed when you drag the pet.
- special : Special animations that will appear in a menu. Can be used to make the pet go to a certain HTML Element and play this animation.