Overview

Our Get Brand Styles feature enables you to easily bring your brand styles into Beefree. With this feature, you can automatically import the following:

• Colors
• Fonts
• Social media links

We retrieve this information directly from your website and online resources. We accomplished this by integrating the BrandFetch API with Beefree. All you need to do to import your existing brand styles is insert your website's URL. Continue reading this article to learn more about how to get started. 

Prerequisites

To get started, ensure you meet the following requirements for each Beefree plan type:

• Starter: Ensure you are the account Owner. Add your styles throughout the Beefree onboarding steps. You will not be able to get your brand styles after the onboarding steps are complete.
• Professional, Business, or Enterprise: Ensure you are the account Owner. Add your styles throughout the Beefree onboarding steps. An Owner, Admin, or Manager can add brand styles after the onboarding steps in the Styles tab in Settings.
• Professional or Business Trial: Ensure you are the account Owner and signed up for the Professional trial. Throughout your Professional trial, you will have the same access to this feature as a Professional or Business account.
• For each account type, ensure you have a public-facing URL with your brand styles. 

Note: Beefree checks that the Owner has a valid business email and an adequate security score. If either of these conditions are not met, the feature will not appear.

How to Use Get Brand Styles

Beefree Starter, Professional, Business, and Enterprise plans allow you to get your brand styles as you onboard. However, not all Beefree plans allow you to get your brand styles after you onboard. This functionality is only available for paid plans. In this section, we will discuss how to get your brand styles during and after onboarding.

Onboarding Steps

Take the following steps to add your brand styles throughout your Beefree onboarding:

1. Create a Beefree account
2. Begin your Beefree onboarding
3. Confirm the domain in the Website url field, or enter and confirm a different domain
4. Click Preview styles
5. Confirm your styles and click Get brand styles to save what you imported

Get Brand Styles in Settings

To get brand styles in your workplace settings, take the following steps:

1. Log into your Beefree account
2. Select the workspace you would like to get brand styles in
3. Select Settings
4. Navigate to the Styles tab
5. Click Get brand styles on the upper right-hand side of the screen
6. Type your website url in the Website URL field
7. Click Preview styles
   
   1. Preview the styles
   2. Click Get brand styles to confirm the import

Note: The BrandFetch API is limited to top-level domain (TLD) URLs. This means that you will only be able to import your brand styles from your domain. For example, you can import styles from beefree.io, but not beefree.io/integrations. 

Edit Imported Styles

This section discusses how to edit the styles you imported.

Colors

Your brand colors are available for reference in your workspace Settings under Styles. You can find the colors you imported in the Color palette sub-section of the Styles tab.

You can manually add more colors in the Settings>Styles>Color palette section of Beefree.

Fonts

Your brand fonts are available for reference in your workspace Settings under Styles. You can reference the colors you imported in the Typography sub-section of the Styles tab.

You can manually add more fonts in the Settings>Styles>Typography section of Beefree. If you do not have a paid plan, you will not be able to edit the fonts. To edit these fonts, you will need to upgrade to a paid plan.

Note: You can only import or edit fonts that are Google Fonts or System Fonts.

Custom Fonts

After you onboard, you can add custom fonts in your Settings under the Styles section.

Note: You need a paid account to add custom fonts.

Google Fonts

If your Google font is unavailable within Beefree’s font list, Beefree will import the font as a custom font. These fonts are available in the custom fonts section of Settings>Styles. You cannot edit these fonts.

Google fonts that you set up as custom fonts will have one font-weight within Beefree. We will explore adding more weight types in the future.

Arial is the fall-back font for the Google fonts under custom fonts.

System Fonts and Font Weights

If your System font is unavailable within Beefree's font list, Beefree will notify you to set it up as a custom font.

Beefree uses the following font weights for the corresponding block types:

• Title: weight 700 for title
• Text and Button: Regular

Beefree enables default fonts when the Brandfetch API does not return any fonts. 

Social Media Links

Your social media links are available in your workspace Settings under Styles. You can reference them in the Social links sub-section of the Styles tab.

You can edit the social media links in the Settings>Styles>Social links section of Beefree. If you do not have a paid plan, you will not be able to edit them. To edit these fonts, you will need to upgrade to a paid plan.

Important Considerations

Consider the following when using this feature:

• If you use Get Brand Styles, you will overwrite any brand styles you previously added. This includes styles you added using the Advanced Style Kit and Styles. A tooltip will warn you about overwriting these styles before using this feature.
• At the moment, some domains are not compatible with the Brandfetch API. This will result in Beefree loading without retrieving the brand styles from the url. We are exploring solutions for this.
• The Brandfetch API may only retrieve colors, fonts, or social media links. It is also possible that it only retrieves a combination of those items, but not all. What the API retrieves depends on how you configured your website.