Installing the Cureo Welcome Widget

Get Cureo On Your Website

You and your members can access all of your team's important content right on your own website. All you need to do is have your webmaster simply copy and paste one block of code to your homepage.

Note: Cureo does recommend that the  Welcome Widget be installed before any outside users are invited to your organization. This will ensure the best user experience by directing them to the  Welcome Widget on your organization's website versus the full application.

Getting Started

Click Org Admin on the top right side of your Org Dashboard.


Click on Website Widgets.

Customizing Your Widget Colors

The Welcome Widget can be customized to match your organization's website branding. 

The most important option is the Primary Color. You would likely want this color to match your branding as it drives the color of the Insider tab and the main color scheme of the widget. 

Text Color is the color of the text in the header of the welcome widget. Make sure to click Save when you have finished.Installing the Widget

After you click Save, your Welcome Widget is ready to go on your website! Click Copy to Clipboard to grab the code below your settings. 

When placing the code, ensure that the code is not inserted in the site template so that it does not appear on every page. Paste the code block as far down on the home page as possible (but not the footer). If you have access to the HTML code, we recommend this be pasted as the last code block prior to the </html> tag. If you have questions or need help, please contact us.

IMPORTANT!  If you want members who click on links inside Cureo emails to be redirected to your website widget you need to register the widget. Once you have installed the widget on your website and have confirmed it's working, go back to manage organization>website widgets. Paste the URL for the page on which you have installed, usually your homepage URL, the widget in the input Welcome Widget URL. Click Update URL. The system will then show a new link to Validate. Clicking on this will open up your website in a new window so the system can confirm the presence of the widget.

Further Customizing Your Widget

Note: The next section may get a bit technical, but you got this! If you have questions or need help, feel free to contact us.

Change the Text on Your Widget Tab

Tab text allows you to change the tab display from the default "Insider" to whatever you choose. To do so, find the line:

tabText: null,

Then change the word null to whatever you choose, just make sure to add single quotes around your chosen word or phrase.

Example:

tabText: 'Cureo Help',

This would change your tab like this:

Change Header Text

Header text allows you to change the widget header display from the default "Welcome" to whatever you choose. To do so, find the line:

headerText: null,

Then change the word null to whatever you choose, just make sure to add single quotes around your chosen word or phrase.

Example:

headerText: 'Here to help',

This changes the header like this:

Nice job!

If you have questions or need help, feel free to contact us.

Change To Button Mode

Note: The next section may get a bit technical, but you got this! If you have questions or need help, feel free to contact us.

Within the widget code that you copied you have a couple options,  mode, buttonElement, and headerText.

Mode

Mode allows you to change the default, tab mode, to button mode, this is very important if you are wanting to enable button mode. To do so, find the line:

mode: 'tab',

Then change the word tab to buttonElement, just make sure to keep the single quotes around buttonElement.

Example:

mode: 'buttonElement',

Great! You have changed your widget mode from tab to button. Now let's wire up your button so it works with the button mode.

Button Element

The button element tells the widget which button to look for by id. 

First, add an id to a button of your choice on the website, or feel free to copy from the example below.

<button id="welcome-cureo" type="button">Board Portal</button>

After you have added your custom id onto the button you want to open the widget, find the line in your widget code:

// buttonElement: 'someElementid',

Make sure to delete the // first to enable the line and then replace the someElementid with the id you added to your button.

Example:

buttonElement: 'welcome-cureo',

Here is what the finished button mode widget code should like. Your ids may be different.

If you have questions or need help, feel free to contact us.

Still having issues, make sure to check out our common welcome widget issues article here: Common Welcome Widget Issues

Still need help? Contact Us Contact Us

Related Articles