The Contact Profile element lets you add a user-friendly profile icon to your pages. This enables your users to manage their account details, access profile settings, and navigate to important sections like the customer center dashboard, community dashboard, and other navigation. The element dynamically adjusts based on the user's status—showing a "Sign In" link for guests or a profile icon for logged-in users. This article will guide you through adding the Contact Profile element to your pages and customizing its settings for a seamless and personalized user experience..png "image(289).png")
Requirements
An active ClickFunnels account.
A page created in your workspace.
Adding a Contact Profile Element in the Page Editor
Inside the page editor, add a Section where you want to place the element.
Add a Row within that section.
Click the orange + Plus or Add New Element button inside the row to insert a new element.
From the MISC (Miscellaneous) category, select the Contact Profile element.
.png "image(290).png")
Once the Contact Profile element is added, you can customize its appearance to fit your page design.
How the Contact Profile Element Works
The Contact Profile element can be used on any page in your workspace, including site pages, funnel pages, courses, landing pages, and more. It is a versatile tool for managing user accounts while ensuring a seamless experience across different workspace areas. Here is an example preview when it is rendered as logged in state:.png "image(292).png")
If the User is Already Logged In:
The Contact Profile icon automatically detects their logged-in state.
It displays the user's profile icon or avatar, replacing the "Sign In" text.
Clicking the icon will open the profile modal.
If the User is Not Logged In:
The element displays a Sign-In text for users who are not logged in.
Clicking the Sign-In text will redirect the user to the Customer Center Sign-In page.
After signing in, users will be redirected to the Customer Center Dashboard page.
The Dynamic Behavior of the Contact Profile Element:
This element is highly dynamic and adapts based on the user’s login state and the domain they visit. If a user logs into one page (e.g., a Customer Center on your site domain) and visits another page within the same domain (e.g., a funnel page), the Contact Profile element will automatically recognize their logged-in state and display the appropriate profile icon. This dynamic behavior ensures a consistent user experience, saving users from needing to log in repeatedly when navigating between different pages.
Customizing Contact Profile Element
When you hover over an element, its border will be highlighted in orange. To access an element's settings, click on the gear ⚙️ icon or click directly on the element to open its' settings panel.
Top Margin
The Top Margin setting allows you to control the space between the current element and the element directly above it. If no previous element exists, the margin will be applied relative to the parent container, such as a row, section, or flex container. You can adjust the margin using the slider or manually input a value (px or percentage %), ensuring the spacing is consistent with your design needs.
Size and Spacing
The Size & Spacing settings help you control the size and positioning of the Contact Profile element. Here’s a breakdown:.png "image(293).png")
Width: Adjust the element's width using a percentage (%) or pixel (px) value.
Top: Set the space above the element in either percentage (%) or pixels (px).
Bottom: Set the space below the element in either percentage (%) or pixels (px).
Align: Align the element to its container's left, center, or right.
Typography
The Typography settings allow you to control the appearance of text in your element. These settings provide two views. You can select a predefined style (Small, Medium, or Large) that applies a consistent design across your page. If you select to override the predefined style, additional settings become available, allowing you to customize the text appearance manually.
Font Family: This option allows you to select the font type for your text. ClickFunnels provides a range of popular fonts from the Google Fonts library. Additionally, you can upload and use your own custom fonts by navigating to Workspace Settings > My Assets > Fonts. Once uploaded, your custom fonts will appear in the selection list for use.
Weight: This option defines the thickness of the text. Depending on your desired emphasis, you can choose from Thin, Regular, or Bold options. Thin fonts provide a subtle look, while bold fonts create more visual impact.
Font Size: You can adjust the text size using the slider or manually inputting a specific value. Additionally, you can choose between rem or px for the size measurement, such as 2rem or 32px.
Rem is a relative unit based on the base font size defined in your style guide. For example, if you select a text size of 2rem and your style guide specifies a base font size of 16px for desktop, the resulting text size will be 32px for desktop view (i.e., 2rem × 16px = 32px).
Px is an absolute measurement, providing precise control over the text size.
Font Size Mobile: Set the font size for mobile views to ensure readability on smaller screens.
Letter Spacing: Adjust the space between individual letters. You can increase or decrease the value using the slider or input a specific value (measured in rem). More spacing spreads the letters apart, while less spacing brings them closer together.
Letter Spacing Mobile: Customize the letter spacing specifically for mobile devices.
Line Height: Controls the vertical space between lines of text. This is typically expressed as a percentage of the font size. A higher percentage increases the space between lines, improving readability, especially for larger blocks of text.
Line Height Mobile: Set a different line height for mobile or smaller screens.
Color: Use the color picker to select the text color. You can choose a predefined color from the Style Guide or create a custom color. When using the Custom color picker, you can select the color using the slider or input a specific HEX code. Additionally, you can adjust the opacity (Alpha value) using the second slider—moving it to the left reduces the opacity and makes the color more transparent, while moving it to the right makes it fully opaque.
Bold: Similar to the Color option, you can select a color for the bold state of the text. This color will be applied when the text is set to bold, allowing you to differentiate it visually from regular text.
Link: Like the Color option, you can apply a specific color to text containing a hyperlink. If the text is hyperlinked, the selected color will be used to style the link, helping to make it stand out.
Icon Color: Choose the color of your icons (if applicable) to ensure they match your overall page design.
Text Casing: Select how your text should appear in terms of capitalization:
Lowercase: All text in lowercase.
Uppercase: All text in uppercase.
Capitalize: Capitalize the first letter of each word.
Decoration: Add text decorations such as:
Underline: Draw a line beneath your text.
Strikethrough: Cross out your text with a horizontal line.
Overline: Draw a line above your text.
Opacity: Adjust the opacity of the text. The slider allows you to make the text more or less transparent. Moving the slider to the left (0) decreases the opacity (making the text more transparent), while moving it to the right (1) makes the text fully opaque.
Align: Set the alignment of your text within its container. Based on your page design, you can choose to align the text to the left, center, or right.
Guest and Logged State Settings
The Guest and Logged states allow you to customize how the Contact Profile element appears based on the user's login status.
Guest State: Customize the "Sign In" text and appearance for users who are not logged in.
Logged State: Configure the profile icon, avatar, dropdown options, and other settings for logged-in users.
Refer to the Guest State Settings and Logged State Settings sections below for detailed customization instructions.
Element Control Panel
The Element Control Panel appears at the bottom of every element in the page editor, offering quick access to essential settings and actions for that element. Here’s what each icon represents:.png "image(47).png")
ALL: The element will be visible on all devices (desktop, tablet, and mobile).
Desktop Icon: The element will only be visible on the desktop view.
Mobile Icon: The element will only be visible on mobile view.
Eye Icon: Use this to hide the element from the page. The element will still be present in the editor but invisible to visitors.
Code Icon: This icon opens the code editor, where you can insert custom CSS or JavaScript code to modify the element's behavior or styling.
Trash Icon: Removes the element from the page editor entirely.
Advanced Settings
To further customize your container (section, row, column, and element), ClickFunnels provides powerful Advanced settings options that allow you to control style, advanced CSS, animation, and rendering logic. We’ve separated these advanced features into dedicated articles to avoid overwhelming you with too much content in one place and to keep our documentation concise. Explore the following resources for more details:
Advanced Settings - Customize Styles: Learn how to populate contents dynamically, position containers, and apply z-index.
Advanced Settings - Customize Animation: Learn how to add animations, control entry and exit effects, and adjust animation delay.
Advanced Settings - Customize Logic: Learn how to apply conditional logic to elements and add custom attributes.
Guest State Settings
The Guest State settings allow you to customize how the Contact Profile element appears for users who are not logged in. Below are the key settings you can configure:.png "image(295).png")
Link Name:
This setting lets you define the text displayed for the "Sign In" link.
For example, you can label it as "Log In," "Sign In," or any custom text based on your preferences.
Padding (Top/Bottom):
Adjust the vertical spacing around the "Sign In" text.
Use the sliders or input specific values in pixels (px) to create balanced spacing and improve the element's visual placement.
Hover State:
Customize how the "Sign In" text appears when the user hovers over it.
Toggle between the Default and Hover states to modify text color, size, or font for interactive feedback.
Icon Before:
You can add an icon before the "Sign In" text for a more engaging appearance.
Configure the following:
Icon Picker: Select an icon from the icon list.
Icon Size: Adjust the icon size for desktop and mobile views.
Icon Color: Set the color to match your branding.
Margin Left/Right: Fine-tune the spacing between the icon and the text for a polished layout.
Logged State Settings
The Logged State settings control how the Contact Profile element appears for users who are already logged into their account. Below is a breakdown of the key features and customization options:.png "image(296).png")
Preview Open Profile
Hide/Preview: These buttons allow you to simulate how the profile modal will appear when the user interacts with the profile icon.
Hide: Keeps the profile modal hidden during editing.
Preview: Displays the modal so you can see its design and content.
Profile Modal Components
The profile modal includes several components that can be customized to fit your needs:
Profile Modal
The Profile Modal component offers a variety of settings that allow you to control its appearance and layout. These settings enable you to create a modal design that aligns with your page’s branding and user interface. Here’s an overview of the available settings and their impact:
General Layout
Top Margin: Adjust the space above the modal to position it precisely within the page.
Width: Define the modal's width in pixels, determining how much screen space it occupies.
Icon Size: Customize the size of icons within the modal, ensuring they are proportionate to the content.
Padding (Sides and Vertical): Adjust the inner spacing around the content, which helps control the breathing room within the modal.
Border
Enable or disable borders around the modal.
Style: Choose from pre-defined border styles or customize them to suit your design.
Borders: Select which sides of the modal should display borders (e.g., all sides, top only, etc.).
Color and Stroke Size: Customize the border color and thickness to match your branding.
Background
Image URL: Add a background image to the modal for a visually engaging design.
Image Style and Fit: You can control how the image is displayed (e.g., stretched, repeated, or positioned).
Color: Set background and foreground colors as standalone or combined with an image.
Corner
Style: Adjust the corner radius to create square, rounded, or fully circular edges.
All Corners: Apply uniform corner rounding or adjust each corner individually by enabling separate edges.
Shadow
Style: Select from predefined shadow styles to add visual layering to your modal.
Shadow Style: Choose between Outset (shadows outside the modal) or Inset (shadows inside the modal) to create the desired effect.
X-Direction and Y-Direction: Adjust the shadow's horizontal and vertical position to control its placement relative to the modal.
Blur: Set the amount of blur for the shadow, creating either a sharp or soft appearance.
Spread: Control how far the shadow extends, influencing its prominence on the page.
Color: Customize the shadow color to match your page design or contrast the modal's background.
Contact Name / Email
The Contact Name and Email component in the Contact Profile element dynamically displays the user's name/email when logged in.
Typography
Font Family & Weight: Choose a font style and adjust its thickness.
Font Size & Line Height: Set font size and spacing for desktop and mobile views.
Letter Spacing: Control spacing between letters for both desktop and mobile.
Color: Customize the text color to align with your branding.
Text Casing & Decoration: Apply uppercase, lowercase, or capitalized text and add effects like underlining, italic, or strikethrough.
Alignment & Opacity: Align text left, center, or right and control its transparency.
Text Shadow
Enable Text Shadow: Toggle the shadow effect on or off.
Offset-X and Offset-Y: Adjust the shadow's horizontal and vertical position.
Blur: Define the sharpness or softness of the shadow edges.
Color: Choose a shadow color that complements your text.
Navigation Links
The Navigation Links component in the Contact Profile element allows you to display menu items for seamless navigation within your funnel or external links. It comes pre-configured with default menu items, but you can customize it further to suit your needs.
Default Menu Items
ClickFunnels automatically includes four default menu items in the Navigation Links component:
My Account: Links to the customer's profile in the Customer Center.
Sign Out: Provides a logout link for the user.
Dashboard: Redirects to the Customer Center dashboard.
Community: Links to the ClickFunnels community.
These menus are pre-linked to their respective sections, ensuring functionality without requiring manual setup. However, you can customize the name and icon by clicking these menus.
Adding Custom Menu Items
To include additional navigation options:.png "image(297).png")
Click the + Menu button.
Add a label for your new menu item (e.g., Help, FAQ, or Support).
Link it to any internal funnel page or external URL.
Spacing
Gap Between Links: Adjust the spacing between menu items for a better layout.
Hover State
The Hover State feature allows you to define how your navigation links appear in two distinct conditions:
Default State: This controls the appearance of menu items when they are not being interacted with. It represents the regular, static look of the links on the page.
Hover State: This defines how the menu items look when users hover their mouse over them, creating an interactive effect. You can customize elements such as text color, font weight, or underlining to highlight the link and draw attention.
When you select either of these states, you can individually adjust the typography settings, such as font size, letter spacing, text color, and decoration, to create unique styles for each state. This flexibility allows you to maintain a professional design while enhancing interactivity and user experience.
Typography
Font Family & Weight: Choose a font style and adjust its thickness.
Font Size & Line Height: Set font size and spacing for desktop and mobile views.
Letter Spacing: Control spacing between letters for both desktop and mobile.
Color: Customize the text color to align with your branding.
Text Casing & Decoration: Apply uppercase, lowercase, or capitalized text and add effects like underlining, italic, or strikethrough.
Alignment & Opacity: Align text left, center, or right and control its transparency.
Icon / Avatar
If the user does not have an avatar uploaded, the profile icon will be displayed instead. This icon includes the first two initials of the user's first and last name (e.g., John Doe appears as "JD").
You can toggle between Icon and Avatar settings and adjust the following:
Size: Set the icon or avatar size in pixels.
Background Color: Customize the background color of the icon.
Color: Set the text color for the initials in the profile icon.
Border: Enable or disable a border around the icon/avatar.
Corner: Adjust the corner radius to make the icon/avatar circular or square, with fine control over each edge.
Example 1: When the Profile Icon is rendered of a user:
.png "image(298).png")
Example 2: When the Avatar is rendered is rendered of a user(Only if the avatar is uploaded by the user in the customer center profile):.png "image(299).png")