Engage Help Center
ENGAGE HELP CENTER
Integration style settings
This section offers an overview of the settings that are available for styling the integrated Engage content.
Manage style settings
The Engage integration feature enables you to customise the style settings of integrated Engage content to match the design concept of your web application. Several of these adjustments can be made in the Style settings section, found within your organisation's Settings.
The Engage integration feature enables you to customise the style settings of integrated Engage content to match the design concept of your web application. Several of these adjustments can be made in the Style settings section, found within your organisation's Settings.
First and foremost, it is possible to adjust the height, width and position, as well as other parameters of the iFrame right into your web application. Whereas, Engage will enable managing various additional parameters from the Style settings section.
Style parameters only for activities without authentication:
1. Header Background Colour: Set the background colour for the header section of the activity.
2. Organization Name Colour: Choose the colour for your organisation's name as displayed in the activity's header.
3. Survey Title Colour: Customize the colour of the activity's title in the header.
4. Language Switcher Colour: Toggle between light and dark themes for the language selection field.
Style parameters for all Engage activities:
1. Primary Colour: Define the main colour for interactive elements, such as buttons, selected answers, active fields, and the progress bar.
2. Button Text Colour: Adjust the colour of the text within buttons, such as "Next" and "Complete".
3. Font Name: It is possible to specify the font, but please note that only those fonts that are free of charge can be applied.
4. Font URL: Add a link to an external font, enabling your activities to use a custom font family that matches your web application’s design.
Style parameters only for activities without authentication:
1. Header Background Colour: Set the background colour for the header section of the activity.
2. Organization Name Colour: Choose the colour for your organisation's name as displayed in the activity's header.
3. Survey Title Colour: Customize the colour of the activity's title in the header.
4. Language Switcher Colour: Toggle between light and dark themes for the language selection field.
Style parameters for all Engage activities:
1. Primary Colour: Define the main colour for interactive elements, such as buttons, selected answers, active fields, and the progress bar.
2. Button Text Colour: Adjust the colour of the text within buttons, such as "Next" and "Complete".
3. Font Name: It is possible to specify the font, but please note that only those fonts that are free of charge can be applied.
4. Font URL: Add a link to an external font, enabling your activities to use a custom font family that matches your web application’s design.
You can customize your organization’s font using Google Fonts.
To customize your organization's font using Google Fonts, follow these two steps:
1. Enter the font name.
This should match the name of the font you want to use from Google Fonts.
Example: Roboto
2. Enter the font URL.
Copy the embed link from Google Fonts and paste it into the Font URL field.
Open the font of your choice. Open the "Get font" and then the section "Get embed code". Extract the URL link from the HTML code sample.
Example: https://fonts.googleapis.com/css2?family=Roboto&display=swap
1. Enter the font name.
This should match the name of the font you want to use from Google Fonts.
Example: Roboto
2. Enter the font URL.
Copy the embed link from Google Fonts and paste it into the Font URL field.
Open the font of your choice. Open the "Get font" and then the section "Get embed code". Extract the URL link from the HTML code sample.
Example: https://fonts.googleapis.com/css2?family=Roboto&display=swap
Important!
- Only Google Fonts are supported.
- If the font name and URL don’t match, the font may not load properly.
- Make sure to include both the name and the full URL.
Need help picking a Font? Browse available fonts at fonts.google.com. Choose one that fits your brand and is easy to read.
5. Page Background Colour: Customize the colour of the page background.
Some examples of tailored style settings are shown below.
The above examples are an approximate interpretation of the capabilities that the style setting management feature entails. However, additional style settings can be applied for the needs of your project or research initiative.
To tailor design elements of the integrated activities that are not available in your organisation's Style settings , please reach out to the Longenesis Support team.
Please contact us via support@longenesis.com about the style settings that should be adjusted.
Please contact us via support@longenesis.com about the style settings that should be adjusted.
We use cookies in order to secure and improve the Longenesis web page functionality, as well as to optimize your experience within this page.
Please see our Privacy policy for more information on how we use the information about your use of our web page. By continuing to use this web page you agree to our Privacy Policy.
Please see our Privacy policy for more information on how we use the information about your use of our web page. By continuing to use this web page you agree to our Privacy Policy.