RainedOut Web Widget

Top Previous Next

Found on the Settings page in RainedOut.

The RainedOut Web Widget allows you to embed RainedOut alerts directly into your own website.

When you send a message to Send to Everyone, RainedOut will also send that alert to any Web Widgets you may have set up.

Note: Alerts sent to Groups will not trigger Web Widgets, as the widgets are tied to the "Send to Everyone" feature only.

Setting up a Web Widget is easy.

To set up your Web Widget:

1. Open the Settings page in RainedOut

2. Under Service Options, locate the Web Widget setup.

3. Click "Add Web Widget"

4. Set a Duration Interval.

The duration determines how long messages will appear on the widget. After the message expires, the widget will stop showing the alert. Set a minimum of 30 minutes for your widget's expiration.

If there are no active messages, the widget will simply return a blank, empty table.

5. Click Save

6. Copy and Paste your RainedOut Widget Code

Once you've saved your <%TITLE% Web Widget, RainedOut will provide you code. Simply copy and paste this code into the HTML source of your web page.
Web_Widget_Code_Example

Your RainedOut Web Widget code is pre-built for you. Just copy and paste into your website's HTML.

Once your widget code is placed inside a web page, it will display your alerts if/when there is an active message, along with an icon linking to your My RainedOut Page.

Here's an example without any "style" added:

Widget_Example_No_style

Without ANY web page style, the RainedOut Web Widget will return a simple table and a graphical link to your My RainedOut Page.

Styling Your RainedOut Web Widget

You can restyle the look/feel of the messages returned using CSS (Cascading Stylesheets). By adding style definitions to your web page or linked stylesheet, you can customize how your widget looks.

Widget_Example_styled

The same exact Widget as above, but this time with a stylesheet added!
Use CSS to change how your RainedOut Web Widget looks.

The following CSS style classes are associated with the RainedOut Web Widget:

.Widgets_Table{}	Controls the formatting of the table containing all message content for the widget.
.WidgetsBoard_Row{}	Controls the formatting of each row returned by the widget.
.WidgetsBoard_Subject{}	Controls the subject line "RainedOut Notification From: Your Organization Name"
.WidgetsBoard_DateTime{}	Controls the formatting of the timestamp on each message.
.WidgetsBoard_Message{}	Controls the formatting of the message text itself for the widget.

Here's an example a typical Widget with custom CSS styles applied...

Widget_Board_Example

Each item in the Widget has it's own style class. Simply add these classes to your website's stylesheet
and redefine them to customize the look of the Widget.

here's the CSS styles used in the example shown above:

.Widgets_Table{

padding: 5px;