Peanut Labs Survey-Alert
Survey Alert can either be used as is, or act as a jumping off point for building your own custom integration and alert into your website.
Basic usage of the Survey Alert is shown in the included html file. To see the alert in action, you first will need to change the
iframeURL in the example html to the url you have the iframe hosted on. Then after loading the html page, a valid user ID needs to be entered before clicking the 'Check' button (for more information on this, see the Parameters section in the API guide). The alert should appear similar to that below:
A function is also added to the head for initializing the alert with the needed parameters and the custom options (more information on these can be found in the Parameters and Basic Customization section below):
And finally something on the page needs to call this function, which in the example html is just tied to a button:
In an actual usage of the alert the call to your
initAlert() would not be tied to a button, but more liekly it would automatically be called after a page loads, passing it the id of the user visiting that page and the url you have the iframe hosted on.
Parameters and Basic Customization
When initializing the Survey Alert there are a few parameters you are required to pass to it, along with several optional parameters which allow for some basic customization:
The id of the user for which you wish to look up surveys. For more details on this check the API documentation.
The url which is included on the alert and the user is prompted to click to go complete surveys. In the example code this currently has a placeholder, but in practice it will point to the page on which you have the iframe hosted.
The width of the alert. Defaults to 450px and the text it contains will wrap accordingly.
Determines whether the alert will appear from the top or the bottom of the page. Can be set either to 'top' or 'bottom' and defaults to 'bottom'.
Determines whether the alert will appear from the left or the right of the page. Can be set either to 'left' or 'right' and defaults to 'right'.
How many seconds the alert will stay on screen before hiding. Note that this will be delayed if the user mouses over the alert and start again when they move the mouse off of it. Defaults to 10 seconds.
The name of your virtual currency which the alert will use in the message. Defaults to 'Points'.
The url for the image which will be displayed next to the alert message. Defaults to a PeanutLabs logo hosted at http://ii.peanutlabs.com/PL_Logo.png.
A boolean which if set to true, will cause debug messages to be logged to the console. Defaults to false and should only be set to true for testing purposes.
Further Customization and Integration
Although it is completely possible to use the Survey Alert as is, it is highly encouraged to dig right into the code and just use this example as a jumping off point for integrating the Monetization API more directly into your site.
For customizing, rewriting or just looking through the Survey Alert as an example, it is recommended you look at the coffeescript file in the
If you are just looking to modify the look of the alert, styling is done with the
STYLE string. This string is injected the into the page, and then gets applied to the elements in the template html defined in
If you wish to do further customization or integrate the API more deeply in your site, check out the API documentation itself.