Skip to main content

Contact Info

The Contact Info widget displays key contact information, such as phone numbers, email addresses, and a physical address. It is most commonly used in a page footer to provide customers with clear ways to get in touch.

note

Custom widgets are described as they are defined for our standard (Mosaic) front-end theme. If the description does not match what you see on the screen, this is due to further customization that has been carried out specifically for your webshop's theme.

General Settings​

These settings control the main header for the widget.

  • The Title is the main heading for the widget, displayed as large, bold text (H2). This is used to grab the user's attention.
  • The Company Name is the content of a secondary line of text that is typically used for the full legal name of the company.

Address Information​

Use these fields to display the company's physical location. All fields in this section accept both text and numbers.

  • Street name + house number: The company's street name and house number. This follows the standard European format.
  • Postal code + city: The postal code and city where the office is located.
  • Country: The country where the main office is located.

Contact Info Fields​

This section allows you to create a dynamic list of contact methods (like phone, email, etc.). Each entry in the list is a "row."

Managing Rows​

  • + Add Row: Click this button to add a new, configurable contact row to the list.
  • - Last Row: Appears when at least one row exists. Click to remove the most recently added row.
  • Delete All: Appears when two or more rows exist. Click to remove all rows at once.

Configuring a Row​

Each row you add has the following fields to configure:

  • Choose an Icon: Sets the icon displayed next to the contact information. For a full list of available icons, visit Font Awesome 6 and copy the icon name (e.g., phone, envelope) into this field.
  • Brand Icon: Check this box if the icon you chose is a brand logo (e.g., WhatsApp, LinkedIn, Facebook).
  • Contact Info: The text that will be displayed to the user, such as +31 6 12345678 or example@cloudsuite.com.
  • Contact Type: This makes the contact info clickable. For example, setting the type to Phone will allow users to initiate a call by clicking the number on their mobile device.
    • Phone: Formats the link for telephone numbers (e.g., tel:+31612345678).
    • Mail: Formats the link for email addresses (e.g., mailto:example@cloudsuite.com).
    • Other: The information is displayed as plain text without a clickable link.
  • Row Actions: At the end of each row, you will find icons to manage it:
    • Trash Icon: Deletes that specific row.
    • Arrow Down: Moves the row one position down in the list.
    • Arrow Up: Moves the row one position up in the list.