Online Template

How to preview pages with the Online Template

February 2, 2022 By Rick Hernandez

Online Template is an easy-to-use tool to customize your web forms. In this documentation, we will discuss how to use the tool and its available components. Also discussed is how to preview pages with the Online Template without swapping out those web forms in Altru and before these forms go live.

With this tool, you will be able to preview your web forms and anything that is being sold online. Remember that this is just a preview. Not everything works as it would be in the production because there are limitations.

We will not be able to show you exactly everything from checkout to cart and confirmation to the credit card but we can show you the first part which is the checkout side. When you are already in this step, the remaining work is for you to preview the pages and make sure that everything looks good and meets your expectations before we move forward.

Online Template Designer

It was already a pre-configured tool but if you want to make changes, you can use the little icons below.

Assets

You can upload your favicon, logo for your header and footer, background, and things like that. You also have the option to upload custom fonts and embed codes to generate CSS code, header code, and footer code.

Settings

Below are the options that you can turn on if you want to include values but the SGS team is the one responsible for this, however, if you want to confirm email addresses, URLs, and things like that, you can go here to check it out.

Preview pages with the Online Template

Step 1: Copy the URL of the page that you want to preview from Blackbaud.

Step 2: Go back to the Online Template tool and click on Add URL.

Step 3: A dialog box will pop out where you can type in the name of the page and paste the copied URL then click Add.

Step 4: On the Preview page there is now an item added. Wait until the designer loads the page for preview which will take a while. Essentially what we did is downloading the page from Blackbaud, apply all the stylistic changes then preview the page.

Step 5: You can click on the Save icon at the bottom and wait as the designer loads the page. In this case, there are no changes applied yet so the page loaded to the designer is totally identical to the Blackbaud. But if you click on the new tab icon, the URL is totally different from the Blackbaud so you can now actually share this link with your colleagues to preview.

Step 6: Let us try to apply some fixes to the webform and see what it looks like. On the Setting side, we will enable the following:

✅Template Fixes
✅Translation menu
✅Empty Cart
✅Member dialog
✅WCAG 2.1
✅Email Validation

Step 7: Go back to the designer and wait as it reloads the preview. Click on the new tab icon to better see the changes made and make adjustments accordingly.

You now have a better understanding of how Online Templates work. The purpose of this documentation is not to configure the template but to show you the process of adding different pages to preview and make necessary changes before your web forms go live.

Test Post

January 30, 2022 By Valerie Magbanua

Test post only. Please disregard.

How to backup your Altru website

January 25, 2022 By Rick Hernandez

Introduction

Backing up your Altru website will help you recover from unplanned events that result in primary data loss or corruption. Backups are handy in restoring your website after an error occurs without losing any data. We highly recommend that you do a backup, especially if you are working on any online template and checkout flows.

We understand how important to have backups, so we created a step-by-step guide on how you can back up your Altru website. This process is done using Mac but is also applicable to Windows.

Backing up your Altru Website

1: Go to your Download folder and create a new folder. Name it Backup.

2: Open your newly created Backup folder and add the following files:

Open your Text Edit/Notepad > Name it Header.html > Save > Use .html.
Open another Text Edit/Notepad > Name it Footer.html > Save > Use .html.
Open another Text Edit or Notepad for the third one > Name it Style.css > save > Use CSS.
Another Text Edit/Notepad to use as a reminder note of what you have done already. You can name it README.md (markdown). Click on Save.

3: Proceed to your Altru account and go to the Web. Click on Page Designer and make a backup of the Layout.

4: Under Select Layout, copy the Header and Footer, Responsive. Go to your Readme.md Text Edit/Notepad and paste the layout name: Layout: Header and Footer, Responsive. It is a reminder that you already have a backup for the layout. The layout might not match the above sample name, but do not worry is just a backup. Save and close the Readme.md.

Backing up the Style of your Altru Website

5: Go back to Layout and proceed to the Colors & Styles tab. Select Advanced colors and styles and click the Edit style sheet.

6: Click your cursor inside the style sheet box. Do Control+A for Windows or Command+A for Mac to select all the CSS and copy it. Click on the Cancel button and go to the Text Edit/Notepad named Style.css to paste the copied CSS. You now have a backup of all your CCS. Save and close

Backing up the Header of your Altru website

7: Go back to Altru and proceed to Configure Content tab to see the header and the footer. Proceed to the Header first and click the little gear on the top left side.

8: Once you’re in the Header Design, proceed to the View tab and click the Code button for the HTML code.

9: On the HTML Source Editor, select all the code using control+A for windows or command+A for Mac and do control/command+C to copy it. Click on the cancel button.

10: Proceed to your Header file to paste the HTML code. Once done, click close and proceed to the next step.

Backing up the Footer

11: Go back to Configure Content to back up the footer of your Altru website. Move to the footer and click the little gear. Same as the header, click on the View tab and then Code. Using Control+A for Windows or Command+A for Mac, select all the HTML code for the footer and copy using Control+C for Windows or Command+C for Mac. Find your Footer file and paste the copied HTML code. Save and Close

12: You now have the backup files that you can use if you ever need to restore your template,

We suggest emailing all these files to support@socialgoodsoftware.com so we can back them up and have access to them if needed. We also encourage you to back it up to your local storage, cloud storage, or any storage you have access to just in case we need it in the future.

Please reach us for your questions through our support channel. We are always happy to help!

How to enable price types with Altru

December 14, 2021 By Rick Hernandez

Enable your price types with Altru to help encourage your members and guests to avail of your tickets online. Ticket price is one of the information they want to know before they decide to buy, so see to it that you enable the setting for particular ticket types to make the price available online.

Steps to enable price types with Altru:

1. Go to your Altru account, then proceed to Tickets.

2. Under Configuration, click Sales methods.

3. Select Online Sales.

4. Proceed to the Price Types tab.

5. Select the price type you want to enable, then click Allow price type.

Your ticket price is now available on your Online Sales. Try this if you have trouble with your web forms to be able to show your price type online.

Please reach us through support@socialgoodsoftware.com if you have questions or need clarification on this topic. We are always happy to help!

How to create a GTM account with Google

November 9, 2021 By Rick Hernandez

If you create a Google Tag Manager account, you will be able to add and update website tags for conversion tracking, site analytics, re-marketing, and others. To start, you need to create a Google account and sign in. Follow the step-by-step guide below to understand better.

Steps on how to create Google Tag Manager Account

1: Proceed to this website: https://tagmanager.google.com

2: Click on CREATE ACCOUNT.

how to create a Google Tag Manager account

3: Fill up the Add a New Account form based on the organization’s data. Once done, click Create.

4: Read the Google Tag Manager Terms of Service Agreement and click YES if it is acceptable.

5: Wait as it creates a Google Tag Manager Account and clicks OK.

6: Along with the Google Tag Manager account was the Google Tag ID. Note this ID and send it over to Social Good Software.

7: Invite Social Good Software to work on your GTM account by going to Admin, then proceed to User Management.

8: Click on Add button, then Add users.

9: Add the email address of Rick – Founder of Social Good Software. Check on the administrator in case he needs to invite a team member. Also, check on the User checkbox. Once done, click Read to change permission.

10: Put a check on Publish, Approve and Edit, then click Done.

11: Proceed to Set all for Container permissions. Put a check on Publish, Approve and Edit. With this, Rick and the added team members can make changes on either Container Level or the specific Web Level we created.

12: Lastly, Click on Invite. Rick will be able to receive an invitation which will give him authority to invite his team members to help configure your GTM Account and set it up properly.

Conclusion

Hopefully, this process helps you set up a GTM account to give greater SEO Improvements to your business and website. If you have any questions, please reach us through our support channel. We are always happy to help!

How to update phone number or address with Altru

September 7, 2021 By Rick Hernandez

In your web forms, you create all kinds of methods for your guests to purchase tickets, edit membership details, and so on; however, what if you have a change of address or phone number with your own company? You will need to go into Altru to update the phone number or address, which we will walk through in this tutorial. It’s time to dive into Altru and edit that form!

Steps to Update Phone Number and Address

Navigate to the Web Form to edit. Enter into your Altru account, then click on “Web” on the Navigation Bar on the top of the screen. Click on Page Designer, then navigate to “Configure Content.” Scroll to the bottom of the dialog box, and locate your contact information in a textbox. Click on the gear that pops up on the top left of the text box. Click on the “View” tab, and edit the code.

The navigation to this place looks like this:

Altru Home Page > Web > Page Designer > Configure Content > Gear on Contact Info textbox > View > Edit Code

Search for the information to edit. For ease of finding the information, press Ctrl + F (Windows) or Cmd + F (Apple) to find the code where the phone number or address is. After locating the information to edit, place the new phone number or the new address into the box. Make sure to save your information before clicking out of the box.
1. Why do we do this? Can’t I just edit the information from the Configure Content tab?
  You could do that, but doing so would remove the link attributes, meaning that clicking or tapping on the phone number would not automatically call the number or navigate to the address. Keeping a link would give ease of access to guests when they want to call the number or navigate to the address.

Summary

Hopefully, editing these forms through Altru will help make organizational changes easier to perform. These edits will make your web forms and website consistent throughout. If you have any other questions on how to use Altru or SGS, please contact us. We are more than happy to help!