How to: Build a Widget for 2alert, 2give and thermometer

Transcription

1 How to: Build a Widget for 2alert, 2give and thermometer A widget is a small piece of code that acts as a shortcut to a larger application. We see widgets everyday on computers, webpages and even our phones. Follow these instructions to build your widget for, a) 2alert opt-in, which will help you audience join your community b) 2give text donations-help donors donate from your website c) 2give thermometer-shows how many 2give donations have been received. After building each widget you will be provided with the information that needs to be placed on your website. Follow the instructions to create an effective widget.

2 The 2alert opt-in Widget This widget is placed on your website and asks people to join your community to receive text updates about your organization and at the same time it captures their contact information. Step 1: Sign in to the url 2portal.connect2give.com Step 2: click the yellow Tools button at the top of the tool bar

3 Step 3: In the Create Widget box on the left side, name your widget. For example 2alert parent group. Under product type select 2alert. Select 2alert sign-in for Widget type. Then for List, select the list you would like the widget to be assigned to. For example Parents Step 4: Click the yellow Create button

4 Step 5: Clicking the create button in Step 4 will take you to the Manage Widget Details page. This is where you will make decisions about the design of your widget.

5 Step 6: Select different colors for your text and background colors. You can also upload a logo and create your own text to appear in the widget. Note: the Logo height is based off of the number of pixels that the image is made up of. If you do not know the size of your image, make an educated guess. Suggested range for an image that is horizontal in shape: Suggested range for an image that is

6 vertical in shape: Remember that you can always go back and edit this field. Step 7: Click the Save & Preview button. Step 8: A pop up window will show the preview of the widget along with the code that you will attach to your website. This is called a Widget tag. If you re not happy with the design, then go back and change it, following the steps previously outlined. Step 9: Once you are happy with your widget, highlight and copy the widget tag and place this code in the back end of your website (or give it to your website developer).

7 Congratulations you ve made your first widget and now people can sign up to be part of your community directly from your website. The 2give donation widget This text to donate (sms) 2give widget can be placed on your website. It allows the donor to enter their cellphone number directly on to the website. This allows them to begin the donation process via the website instead of sending the first text from their cellphone. After the donor inputs their telephone number they will receive a message on their cellphone that asks them to confirm their donation by replying yes. Step 1: Sign in to 2portal.connect2give.com Step 2: Click the yellow Tools tab on the toolbar.

8 Step 3: In the Create Widget box on the left side, name your widget. For product type select 2give. For widget type select donation. For product type select your shortcode and keyword and then select your list. Step 4: Click the yellow Create button

9 Step 5: the Manage Widget Details page will now appear Step 6: To select a logo start by clicking the blue [Select image] button. Step 7: Now click the Upload a file and select your logo.

10 Step 8: Click the word select to add it to the widget.

11 Step 9: Select the background color by clicking on the box and find the correct color on the color wheel or by typing your HEX number if you have it (reference number for the color your organization uses). Step 10: Now select the Save & Preview button.

12 Step 11: A pop up window will appear with the preview of the 2give donation widget and also the widget tag. Step 12: If everything is in order then copy the Widget tag code and place it in the back end of your website. Once the code is in place on your website donors will be able to donate to you by typing their number in the box and clicking the yellow donate button.

13 The 2GIVE THERMOMETER The 2give thermometer is a widget that appears in the shape of a thermometer and indicates visually how much in donations is being collected by 2give donations Step 1: Sign in to 2portal.connect2give.com Step 2: Click the yellow tools tab on the toolbar.

14 Step 3: In the Create Widget box on the left side, name your widget. In product type select 2give. Select Web Thermometer for Widget type. Then for Product, select the keyword to assign the widget. Step 4: Then click the yellow Create button

15 Step 5: the Manage Widget Details page will now appear ttoo

16 Step 6: To select a logo start by clicking the blue [Select image] button. Step 7: Click the Upload a file and select your logo. Step 8: Click the word select to add it to the widget.

17 Step 9: Fill out the remaining information background color, donation cause, donation goal, sponsor message.

18 Step 10: Now click on the Start timestamp box to select a date and time for the thermometer to start counting your 2give donations.

19 Step 11: click the Done button on the calendar once you have selected the date and time. Step 12: Now click the Save and Preview button

20 Step 13: A pop-up window will give the url of the thermometer in the Widget tag box.

21 Step 14: to preview the thermometer click the blue Click to preview button. Step 15: The thermometer webpage will update automatically every seconds.