Add voice to your site

QWiPS provides a handful of free, easy-to-use, easy-to-customize Widgets for your websites. Just follow a few easy steps below and you will be able to address your users in voice and even let them talk back to you in minutes!

Step 0. As an example, imagine you have a very simple web page:

<!DOCTYPE html>
<html>
<head>
  <title>My awesome page</title>
</head>
<body>
  Here is some text.<br/>
  And here is a link to a QWiP: <a href="http://qwips.com/9mqqo6">My cool QWiP!</a>
</body>
</html>

Here is how it looks right now:

Here is some text.
And here is a link to a QWiP: My cool QWiP!

Step 1. Include the QWiPS Javascript Library in your pages.

To include the QWiPS Javascript Library in your pages, just add a <script> tag between the document's <head> and </head> tags, as shown below:

<head>
  <title>My awesome page</title>
  <script type="text/javascript" src="http://qwips.com/api/js/2"></script>
</head>

All links to QWiPs will already be turned into widgets, automatically! This is how your page looks now:

And here is a link to a QWiP: My cool QWiP!

This is because all links to QWiPs turn into Spot Players by default. Learn more about including the QWiPS Javascript Library and customizing it's behavior here.

Now, let's add more widgets.

Step 2. Choose a widget you want to add.

On the "Widgets for websites" page, choose a widget you would like to add and customize it. Let's assume you've chosen the Aggregator widget.

Step 3. Add the widget to your page

There are several ways to add the widget to your page, but we are going to demonstrate the easiest one. Just copy the HTML Usage Example from the "Widgets for websites" page after you've customized the widget, and add it to your page:

<!DOCTYPE html>
<html>
<head>
  <title>My awesome page</title>
  <script type="text/javascript" src="http://qwips.com/api/js/2"></script>
</head>
<body>
  Here is some text.<br/>
  And here is a link to a QWiP: <a href="http://qwips.com/5xw56o">My cool QWiP!</a>
  And here is my QWiPs Aggregator:
  <div qwips:widget="aggregator" qwips:aggregatorusername="spencer"></div>
</body>
</html>

That's it! Here is how your page looks now:

And here is a link to a QWiP: My cool QWiP!
And here is my QWiPs Aggregator:

You have successfully added Voice to your website! Explore the rest of the QWiPS Javascript Library documentation to learn more about customizing it's behavior and responding to user actions.