Website Pet Builder

- Manual -

Display messages, notifications or various forms of animations using a tiny virtual pet.
Can act as a Guide or as a notification tool.

CONTENT

  1. MAIN FEATURES
  2. HOW IT WORKS
  3. BUILD PET:
  1. New Pet
  2. New Animation
  3. New Frame
  4. Add Elements
  5. Add an Image
  6. Update the Element Content
  1. ADD MESSAGES
  1. Simple Messages
  2. Guide Mode Message
  1. GUIDE MODE
  1. Create a Guide Animation
  1. ADVANCED BEHAVIOUR
  2. IMPORT DEFAULT PRESETS
  3. IMPORT / EXPORT PET CODE
  4. NOTES

1.Main Features

2.HOW IT WORKS

The Pet content uses “Animations” that contain “Frames” which can contain elements that can be added or edited in order to create animations.

Every Animation can have one or more Frames.

Every Frame can have elements that can be positioned, scaled or have custom color & transparency.

Elements can be represented by images, texts, characters or font icons. Font Awesome is used to provide a vast library of icons.

To edit an element you must first select it. After that you will see controls near it.

The Pet can have any number of animations. The animations you provide can be set to be displayed when pet goes in various modes - talks, walks, is dragged or is stationed.

3.BUILD a PET

3.1. New Pet

To add a pet icon on the preset box, you need to add an image path in the input field that appears when you Hover the mouse over the image icon near the photo area.

3.2. New Animation

3.3. New Frame

3.4. New Element

You can add a shape using the shapes present in the Font Awesome icons gallery OR create elements using images, texts or html code.

3.5.Add an Image

To add an image you need to add an image path in the input area then click the ADD button.

The images you add are good to be in png or gif format so you can have a transparent background. JPG images don’t have transparency.

Transparent png image used for Doge:

3.6 Update the Element Content

Sometimes you will probably need to update the images or the content of an element but you already create the animations with it. To replace the instance of that element in all the places is used… you can use the “Replace Selected Element” option.

4.Messages

The pet has the option to show simple messages.

Any message you add in the Messages Area will be displayed by the pet when the probability is met. The messages will be shown in order and looped.

The users can also see those messages by navigating them using the Mini Menu that appears at when you hover the mouse on the Pet.

The messages that are present in the “Special” animations are handled differently. Those will appear only when the Special animation starts.

5.Guide Mode - Special Animations

The Pet can have “Special Animations” that can be played at special times. This feature lets the Pet act as a Guide for your website. See the “Boy - Guide” preset to see how it works.

A “Special Animation” features:

Create a Guide Animation - Special Animation

STEP 1: Make an Animation to be “Special”

To create a Guide Animation you need to create a new animation and set it to be “Special” from the Animation Type Selector. This will make the Pet know that this animation has special features.

STEP 2: Add a target element.

To set what element needs to be targeted by the Special animation, you need to provide the #ID of that element or a text that is contained in that element in the field “Target Page Element”

When the Pet reaches near the page element, it can be set to display a message or an animation.

6.Advanced Behaviour

Use the “Advanced Options” area to set the behaviour of the Pet depending on how you need to behave. There you will find description for every option.

7.Import Default Presets

To import the presets that come with the plugin, you must use the Wordpress Importer from admin area and point to the file “website_pet_builder.presets.xml” you will find in the pack you receive with the plugin.

You can import the default presets if you delete or you want to get the default look for the pets.

8.Import/Export Code

You can see the generated code used for the pet in this area.

Possible Use:

9.Notes