Customizing Your Branding

Customizing Your Branding

Megan Sullivan

Make CoConstruct your own with a custom logo and color!

WHERE

Under the Settings menu, select Custom Branding. Any Admin user on the account has access to these settings.

Custom_Branding_Applying_Color_and_Logos.gif

HOW

The custom branding page provides a few fields to get you set up:

1. Custom URL

Set up the login URL for CoConstruct unique to your brand and company. This provides you direct access to your very own personalized login screen plus creates the groundwork for a login form you can embed on your website. Select Set Custom URL then put in your company name with no spaces.

Add the finalized link to your list of web browser bookmarks or desktop shortcuts. Share with your clients and tream!

Custom URL Not Available?

  • Abbreviate or shorten your company name
  • Insert capital letters
  • Add spaces in between words

2. Color

Choose what accent color should accompany the logo you upload. This color displays behind your logo on the main top banner of your account and on your custom login screen, plus see it reflected as an accent on the mobile app icon.

To pick your company color, click on the default color displayed. Choose from the color picker which one suits you best.

Have a specific HEX, RGB, or HSLA code? Simply type out the number.

Looking to specifically match your company color from your website but aren't sure what the code number is? Use websites such as HTML Color Codes to submit a screenshot of a color you'd like to match. Grab the code provided, then plug that into the Custom Branding page.

3. Logos

Brand the CoConstruct platform as a part of your company with a logo. These logos should represent your company and may mirror what you have on your website, trucks, document headers, employee attire, and more. Pick clear logos showcasing an image associated with your company and/or displaying the company name. Any documents generated from CoConstruct sent via email automatically contain your address and phone number, plus state that the sender is your company.

Either drag and drop a file or pull something from your computer, then see the Previews automatically populate. Everything saves instantly so you'll notice these changes appear in the top header and elsewhere!

How large can the branding file be? Branding logo files should be relatively small, under 2 MB in size.

4. Login Code

Provide clients with quick and easy ways to log into their online portal directly from your company website. Simply copy and paste the HTML code provided in the Custom Branding page, then embed it into your company website.

Custom_Branding_Embedded_Login_Form.png
Example Login Form

Exact instructions for embedding the code depend on the website platform you leverage, but look for any HTML code editor that allows you to paste in the provided code. Apply these changes to make them live.

Modifying the Default Code

The ifram code provided sits independently on your website as a self-contained entity.  It will not inherit any styling from your website as a result. Editing or tweaking any of the HTML code risks breaking the login form.

APPLYING BRANDING

All changes you make to your custom branding save dynamically. See colors and logos change in the previews provided but also on the top header bar as well.

Not seeing changes appear? Try refreshing your screen!

To ensure all branding adjustments and changes apply to all users (team members and clients) on your account, use the Apply Branding to All Users function.

Custom_Branding_Applying_Branding_to_All_Users.png

Any team member and client will automatically start to see the new custom branding when they log in and/or receive emails.

What about trade partner branding? Most trade partners will interact with you via email. Any correspondence they receive will display your company name clearly at the top. Emails are branded based on the branding settings of the team member sending the communication. Trade partners logging into CoConstruct see a standard CoConstruct branding with a quick way to navigate to your projects.

Trade_Partner_Portal_Builder_Company_with_list_of_Projects_Branding_Header.png