--- title: "Contact Bar" description: "The Contact Bar Component can be used to offer User the Option to have the Contact Details directly at Hand." path: https://www.eonshowroom.eon.com/en/page-elements/contact-bar.html lastModified: 2025-02-10T15:12:06.329Z --- # Contact Bar # Contact Bar An Example of a Contact Bar can be seen right Side of this Page. [How to Configure](#how-to) ### Description The Contact Bar Component can be used to offer User the Option to have the Contact Details directly at Hand. - Can have Links and / or Layer - Added to Page as Experience Fragment - Added to Page via Configuration Page ### Usage Rules & Features ##### Features - Can have Links and / or Layer ##### Properties - Added to Page as Experience Fragment via Configuration - Each Layer is also an Experience Fragment ##### Design - It will appear on right Side of the Screen on a Page - Different Background Color Schemes for Layers are possible ##### In which Grid Columns does it fit? **Never put a Contact Bar in a Grid !**Contact Bar is created as Experience Fragment and added via [FoundationNg Global Elements Config](/content/foundationNG/en/aem-basics/configuration-pages/foundationng-global-elements-config.html). ##### DO's - Add as many Items as needed - Use Layers to add individual Content ##### DONT's - Do not add Experience Fragments as Layers that are based on other Grid than 12 Column Grid Layout ## Configuration ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha) ### Create Experience Fragment At first, Editor needs to create an Experience Fragment in Experience Fragments Part. [Find out more about Experience Fragment Handling](https://www.eonshowroom.eon.com/en/aem-basics/experience-fragment-handling.html) ![Add Contact Bar in Experience Fragment](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/contact-bar-01%3A1-1?fmt=webp) ### Add Contact Bar in Experience Fragment Inside the created Experiece Fragment, the Contact Bar Component needs to be added. ![Choose a Color](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/contact-bar-02%3A4-3?fmt=webp) ### Choose a Color In Editor Dialog of Contact Bar only Neutral 100 can be choosen as Color Scheme for it in E.ON Style. So, no need to manually configure it. ![Add Contact Bar Items to Parsys of Contact Bar](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/contact-bar-03%3A2-1?fmt=webp) ### Add Contact Bar Items to Parsys of Contact Bar On bottom-right of the Experience Fragment Page, Editor can find the Parsys of Contact Bar. There, one or multiple Contact Bar Items can be added. ## Contact Bar Item Keep in Mind There are four Types of Contact Bar Items: - Link - Mail - Phone - Layer ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/contact-bar-04a%3A1-1?fmt=webp) ### Maintain Contact Bar Item At first, Editor needs to decide for a Type of Contact Bar Item. This could be Link, Mail, Phone, or Layer. For Types **Link**, **Mail**, and **Phone**, Editor needs to provide a Text with a Maximum of 25 Characters, an Icon Name, and a Taget URL, Mail Adress, or Phone Number. Furthermore, an Aria Label for Accessability can be added. If **Layer** is choosen as Type, also a Text with a Maximum of 25 Characters and an Icon Name are needed. But instead of a Target URL, an Experience Fragment containing all Content for the Layer, must be choosen. Furthermore, Background Color Scheme of the Layer is selectable. Also here, an Aria Label for Accessability can be added. #### Keep in Mind This is important for Layer Experience Fragment: - The Layer itself is an Experience Fragment, which should be based on a Grid. - Use only 12 Column Grid for the Layer Experience Fragment. [Learn More about Experience Fragment Handling](https://www.eonshowroom.eon.com/en/aem-basics/experience-fragment-handling.html) [Learn More about Experience Fragment Content](https://www.eonshowroom.eon.com/en/specials/experience-fragments-content.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/contact-bar-04b%3A1-1?fmt=webp) Text max 25 char ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/contact-bar-04c%3A1-1?fmt=webp) Text max 25 char ![FoundationNG Global Elements Config](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/foundation-ng_global-elements-config%3A2-1?fmt=webp) ### Page Configuration for Contact Bar To make Contact Bar appear on a Page, Path of it needs to added in FoundationNG Global Elements Config on a Configuration Page. [Read more about Configuration Pages](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages.html)