SaaSquatch Help Center

SaaSquatch offers a WYSIWYG (What You See Is What You Get) drag-and-drop editor that allows you to customize the look and contents of the widgets presented to your participants.

πŸ”— Default Versions

The editor page will initially load with the default version of the widget you are viewing. These default versions are intended to get you up and running as quickly as possible with your Growth Automation Program and contain generic default copy with example reward amounts and types. These default versions also include a placeholder image to simulate how a header would look on your widget.

You can return to these default version at any time by clicking on the β€œReset” button above the editor. We highly recommend reviewing these default templates and making changes to ensure that the information displayed to your users is relevant to your program and product.

πŸ”— Editor Layout

πŸ”— The Horizontal Toolbar

The Horizontal Toolbar

At the top of the editor you'll find the horizontal toolbar that allows you to do the following (from left to right):

  • Adjust the view so you can preview how the widget renders on a desktop, tablet or mobile screen.
  • Buttons to Save the changes made to the widget, Reset back to the default version, or head Back to the Program Settings page.

πŸ”— The Workspace

This is where the widget you are editing is rendered. It is adjusted live as you make changes to its components in the vertical toolbar.

You can also click on the individual components to quickly load their individual settings in the vertical toolbar. In some cases, you can also move the component by clicking and dragging on the move icon that loads when the clicked component is highlighted.

Unlike the email editor, you are not able to make adjustments to the text or images directly in the workspace. All changes, with the exception of some moveable components, need to be done in the Vertical toolbar.

πŸ”— The Vertical Toolbar

The vertical toolbar contains a list of all of the available components. This is where you will enter changes to each component to adjust the look and feel of your widget.

The first option is Widget Style which allows you to configure that overarching colours and font that will be used in the widget.

Below the Widget Style section is a list of each individual component in the widget. Clicking on each one will provide a list of available adjustments, including the content; font colour, size and alignment, and padding for the component. You can also hide individual components by clicking on the eye icon to the right of the component name.

Note: For advanced formatting when adjusting the content, you can check the β€˜Use Markdown’ button which will allow you to use Markdown to make text bold, italic among other visual changes.

πŸ”— How Do I...

The following section outlines how to perform some common tasks that can be undertaken to make your widget more unique and in line with your company's aesthetic.

πŸ”— How Do I Add My Company's Logo?

To add your logo to the top Banner section of the widget:

  1. To begin, you will need to have an image file of your logo that fits the following criteria:
    • Is hosted online and openly accessible/able to be hotlinked.
    • Is the recommended 500px by 300px in size.
    • Is in either a JPEG/JPG, PNG or GIF format.
  2. In the vertical menu on the right-hand side of the editor, click on the eye icon beside Banner to add it to the widget. A placeholder image should appear in the sample widget in the Workspace.
  3. Click on the down arrow to the right of Banner to reveal the banner settings.
  4. Enter the URL of your hosted image into the Upload Image field. The example in the widget should update to show your new image.
  5. The next 3 fields allow you to adjust the height as well as the padding (the space around the banner) in pixels. Changes are made live in the editor for you to review and adjust.
  6. Click the Save button to save the changes you made to the widget and push the changes to your currently displayed widgets.

πŸ”— How Do I Edit the Copy in the Widget?

You can easily edit the copy in your widget using the following steps:

  1. Locate the section that includes the text you want to adjust and click on the section in the Vertical Toolbar to the right.
  2. In the settings that load for that section you'll be able to locate the field that contains the text you want to change. This field might be labelled Content or the name of the section you are attempting to change (i.e. Button Text).
  3. Edit the text accordingly.
    • Most fields support the use of Markdown for formatting. You can read more about Markdown by clicking here.
  4. Click the Save button to save your changes and push them out to your currently displayed widgets.

πŸ”— How Do I Adjust The Colours in the Widget?

Generally, you will be able to adjust the colour of a section of the widget by going into the appropriate section in the Vertical Toolbar on the right-hand side of the editor.

  • You can adjust the background colour of the entire widget from the Widget Style section.
  • The font colour is adjusted within each section. For example, you would click on the Header section to adjust the colour of the font in the header.
  • Button colours are adjusted in the Share Buttons and Share Link sections.

πŸ”— How Do I Hide/Show Sections of the Widget?

Hide Sections Icon
It is possible to add and remove sections of the widget by clicking on the eye icon associated with that section in the Vertical Toolbar. For instance, if you want to hide/remove the Header section, simply click on the eye icon beside Header and you will see the Header is removed from the widget.

Danger: Highlighting a section and hitting the Del key on your keyboard will result in the section being removed from the widget completely. The only way to restore the deleted section is to restore the widget to its default state. You will lose all changes in the process. Be sure to only use the eye icons when you want to hide or remove a section from the widget.

πŸ”— How Do I Adjust what Share Buttons are Shown?

You can adjust the share buttons that are shown in the widget by navigating to the Share Buttons section in the Vertical Toolbar. There is no limit to how many share buttons you add to the widget.
  1. Choose which share method you would like to add/remove from the Select Button to Edit drop-down menu.
  2. You can chose whether or not the share method button appears in the widget using the Disply Rule drop-down menu.
  3. If you would like, you can adjust the text of the Share Button you are editing by using the Button Text field. You can also adjust the colour of the button and text by using the colour selectors there as well.
  4. Click the Save button to save your changes and push them out to your currently displayed widgets.

Remember that the Display Rule, Button Text, and the Colour fields will all only apply to the share medium selected in the Select Button to Edit field.

Our editor uses Markdown to formulate text, including to make text into a clickable link. You can use the following steps to turn the Terms and Conditions text in the Footer into a clickable link:

  1. Click on the Footer section in the Vertical Toolbar.
  2. Check the Use markdown box if it is not already checked.
  3. In the Content field, put square brackets around the "Terms and Condition" text followed by the link in brackets. The finished product should look like this [Terms and Conditions]( wherein the link to your own T&C's page is in the brackets.
  4. Click the Save button to save your changes and push them out to your currently displayed widgets.

πŸ”— What advanced customization options are available?

SaaSquatch widgets are based on standard HTML and web components. This makes extending the SaaSquatch widget experience possible for web developers familiar with these web technologies.

  • If you're not familiar with web development, talk to our success team about getting a quote for a custom theme.
  • If you're familiar with web components, then see our article about how to write your own web components

For further assistance with the design and editing of your widgets, please reach out to our Success Team.