Study Look and Feel

Sprig provides several options to ensure the studies are an immersive and frictionless experience. Listed below you'll learn how to tailor and customize studies.

In Settings > Look and Feel, you can:

  • Add a custom logo.
  • Change the page location of the study and the appearance of the surrounding page.
  • Change the border color on the study.
  • Add custom CSS to reflect your own branding.
  • Enable/Disable UserLeap signature - Enterprise only

Logo

Use this option to upload a logo that will be displayed in Email and Link Studies. File types supported include GIF, JPEG, and PNG.

Study Appearance

Study positioning is only available for Web Studies and applies to all studies at a Product level.

Desktop

By default, on desktop/tablet screens, Sprig studies will appear in the bottom right corner of your web application, but you can change that to also support:

  • Bottom left
  • Top left
  • Top right
  • Centered Modal

Studies that are Centered Modal have the option of a light or dark overlay and the option to allow or disallow exiting the study by clicking outside the modal.

With the exception of center-positioned studies, your users may still interact with your website while the study is visible.

Mobile

On mobile devices, Sprig studies always appear at the bottom of your web application. By default, your website will still be visible as normal on the remainder of the screen and users will be able to interact with it.

You can choose either a light or dark overlay to focus attention on the study. In this case, you have the option to allow/disallow the study to be exited by clicking outside the study.

Study Style

The color setting allows you to adjust the primary color of the feedback prompt so that it fits seamlessly into your user experience.

You can enter any valid hexadecimal #123ABC or RGB rgb(256,256,256) color code. The default color is Black #000000.

Web Study Customization

By adding custom CSS, this feature enables you to tailor web studies to reflect your brand.

  1. Click on Add Custom Styles to add a custom a CSS. You can now edit the CSS directly.
  2. Click on the Question Type icons and Update Preview to see the changes you have made.
  3. When you are satisfied, click I acknowledge the changes made to study styling will immediately apply to all web studies, then click Apply Styles to make your changes to all web studies.

To revert any changes made back to the defult style, click Restore contents to default style Restore contents to default style, then click Apply Styles.