The **Integration Code** is one of the **Embed** components that allows you to seamlessly integrate external content into your pages, providing a flexible and efficient way to display web elements. ⚠️ **This component can only be created by the Site Admin. Please contact us if you need assistance with its creation.** ## How to edit in the back office? ![Integration code edition gif](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Screen%20recording%202025-01-17%2016.14.13.gif?itok=OPQvNKid) Once the **title**, **hero banner**, and **content push** of the page have been updated, you can start working on the content by adding an **Integration Code**. First, add an **Embed**. Then, click on **Media** and choose **'Integration Code'** from the tab bar. In the **Integration Code** form, start by entering the **Integration Code** **Title** to define its purpose. Next, **embed your external content** by adding the **link** in the **code**. **Save Your Changes and Change the status to "Published"**. ## Example: body { margin: 0; padding: 0; min-height: 100vh; } .cls-5{fill:#62b800}.cls-7{opacity:.524}.cls-8{fill:#8adae0}.cls-9{opacity:.333}.cls-11{fill:#313739}.cls-12{opacity:.571}.cls-14{fill:#2aa6c8}.cls-15{opacity:.619}.cls-16{opacity:.857}.cls-18{fill:#1f2a37}.cls-19{fill:#1aadc1}.cls-20{opacity:.762}.cls-21{fill:#202731}.cls-22{fill:#25454f}.cls-23{fill:#277287}.cls-24{opacity:.476}.cls-25{fill:#98f2f9}.cls-26{opacity:.952}.cls-27{fill:#81c9cf}.cls-31{fill:#184065}.cls-32{fill:#2c2f31}.cls-33{opacity:.143}.cls-34{fill:#134e81}.cls-35{fill:#78b9bf}.cls-36{fill:#22b3c6}.cls-37{fill:#fff}.cls-39{fill:#409400}.cls-40{fill:#86d2d8}.cls-41{fill:#66999d}.cls-44{fill:#11538d}.cls-45{fill:#8fe2e8}.cls-46{fill:#21252b}.cls-47{fill:#125187}.cls-49{fill:#299fbf}.cls-50{opacity:.429}.cls-51{fill:#265b6b}.cls-52{fill:#cdeafc}.cls-53{fill:#71d600}.cls-54{fill:#2bbde4}.cls-57{fill:#265461}.cls-58{fill:#1b354e}.cls-59{fill:#43585a}.cls-60{fill:#193d5f}.cls-61{fill:#3f8403}.cls-62{fill:#74b1b6}.cls-63{fill:#266374}.cls-65{fill:#6fa9ae}.cls-66{fill:#7dc1c7}.cls-67{fill:#0e96a8}.cls-68{fill:#24363c}.cls-69{fill:#e30613}.cls-71{fill:#4c686b}.cls-72{opacity:.714}.cls-73{opacity:.4;mix-blend-mode:multiply}.cls-74{fill:#231f20}.cls-75{fill:#55787c}.cls-76{fill:#287990}.cls-78{fill:#105692}.cls-79{fill:#193b59}.cls-80{fill:#253d45}.cls-81{fill:#1e2d3d}.cls-82{fill:#282728}.cls-83{fill:#068791}.cls-84{fill:#242e33}.cls-86{opacity:.381}.cls-87{fill:#476063}.cls-88{opacity:0}.cls-89{fill:#232729}.cls-90{fill:#91f741}.cls-91{fill:#17436a}.cls-92{fill:#507073}.cls-93{fill:#469b00}.cls-94{fill:#bbddef}.cls-95{fill:#276a7d}.cls-96{fill:#2990ac}.cls-98{opacity:.19}.cls-99{fill:#629195}.cls-100{opacity:.048}.cls-102{fill:#254c58}.cls-103{fill:#effaff}.cls-104{fill:#2997b5}.cls-106{fill:#1a3853}.cls-107{fill:#288199}.cls-108{opacity:.286}.cls-109{opacity:.667}.cls-112{fill:#1d3042}.cls-113{opacity:.905}.cls-114{fill:#81d6e7}.cls-115{fill:#222226}.cls-116{fill:#144b7b}.cls-117{fill:#164670}.cls-118{fill:#6ba1a6}.cls-119{fill:#2bb5db}.cls-120{fill:#42c1db}.cls-121{opacity:.095}.cls-123{fill:#7ab929}.cls-124{fill:#acd1e2}.cls-126{fill:#3a484a}.cls-127{fill:#418203}.cls-129{fill:#93eaf1}.cls-130{opacity:.81}.cls-131{fill:#0f5998}.cls-132{fill:#1c3248}.cls-133{fill:#2888a3}.cls-134{fill:#154876}.cls-136{fill:#598084}.cls-137{fill:#d4eeff}.cls-141{fill:#3e5052}.cls-142{fill:#2dbad7}.cls-144{fill:#6ccfe3}.cls-145{opacity:.238}.cls-146{fill:#57c8df}.cls-147{fill:#5e898d}.cls-148{fill:#353f41}.cls-149{fill:#002D62}.cls-150{fill:#2aaed1} .veolia_planet { width: 100%; max-width: 800px; margin: 0 auto; min-height: 100vh; display: flex; align-items: center; } #mask { animation: maskWidth .2s ease-out 1.88s forwards; } @keyframes maskWidth { from {width: 500px;} to {width: 250px;} } .veolia_planet .planet { transform: scale(0) rotate(-30deg); transform-origin: 50% 50%; animation: animPlanet 1.25s cubic-bezier(0, 0, .38, 1.07) 0.5s forwards; } @keyframes animPlanet { from {transform: scale(0.1) rotate(-30deg);} to {transform: scale(1) rotate(0deg);} } .veolia_planet .planet .whaterPlanet { transform: rotate(0deg); transform-origin: 50% 50%; animation: whaterPlanet 240s linear 0s infinite; } @keyframes whaterPlanet { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } .veolia_planet .headline { transform: rotate(-190deg); transform-origin: 50% 50%; opacity: 0; animation: animHeadline 2s ease 3s forwards, animOpacity .35s ease 2s forwards; } @keyframes animHeadline { from {transform: rotate(-190deg);} to {transform: rotate(0deg);} } @keyframes animOpacity { from {opacity: 0;} to {opacity: 1;} } .veolia_planet .headlineTitle { transform: rotate(0deg); transform-origin: 50% 50%; fill: #ffffff; opacity: 0; animation: animRotate360 20s ease-out 15s infinite, animOpacity 0.35s ease 3s forwards; } @keyframes animRotate360 { 0% { transform: rotate(0deg); } 15% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } .veolia_planet .headline .lineGrey { stroke-dasharray: 1000; stroke-dashoffset: 1000; transform: rotate(180deg); transform-origin: 50% 50%; animation: animLinegrey 2.4s ease 2s forwards; } @keyframes animLinegrey { from { stroke-dashoffset: 1000;} to { stroke-dashoffset: 0;} } .veolia_planet .centerBrand { transform-origin: 50% 50%; transform: scale(0); animation: animScale .75s cubic-bezier(0, 0, 0.43, 1.32) 3s forwards; } @keyframes animScale { from {transform: scale(0);} to {transform: scale(1);} } .veolia_planet .centerBrand .titleBrand { opacity: 0; animation: animOpacity 0.75s ease 3.3s forwards; } .veolia_planet .centerBrand .logoBrand { opacity: 0; animation: animOpacity 0.75s ease 3.6s forwards; } .veolia_planet .links .btnLink { transform: scale(1); transform-origin: 50% 50%; opacity: 0; } .veolia_planet .links .btnLink.btn1 { animation: animOpacity .35s ease 3.5s forwards, animScale .7s cubic-bezier(0, 0, .38, 1.07) 3.5s forwards; } .veolia_planet .links .btnLink.btn2{ animation: animOpacity .35s ease 3.8s forwards, animScale .7s cubic-bezier(0, 0, .38, 1.07) 3.8s forwards; } .veolia_planet .links .btnLink.btn3 { animation: animOpacity .35s ease 4.1s forwards, animScale .7s cubic-bezier(0, 0, .38, 1.07) 4.1s forwards; } .veolia_planet .links .btnLink a { transform: scale(1); transform-origin: 50% 50%; transition: .35s cubic-bezier(0, 0, .38, 1.07); } .veolia_planet .links .btnLink a:hover { transform: scale(1.07); } .veolia_planet .links .circleLinks { transform-origin: 50% 50%; opacity: 0; fill: #ffffff; animation: animOpacity .15s ease 3.5s forwards; } .cloud3 { animation: animCloud 5s ease-in-out alternate infinite; } @keyframes animCloud { from {transform: translateY(0px);} to {transform: translateY(-5px);} } [ ](https://www.latinoamerica.veolia.com/pt/descarbonizacao-no-setor-de-alimentos-e-bebidas) [ ](https://www.latinoamerica.veolia.com/pt/descarbonizacao-para-hospitais) [ ](https://www.latinoamerica.veolia.com/pt/descarbonizacao-hoteis) ## Enhance your web pages with components [Discover all the components here](/drupal-essentials/components) [ ![container icon](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%2812%29.jpg.webp?h=b202b291&itok=vmeeKQt-) ](/text)[Text](/text) ### [Text](/text) [ ![Card logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2832%29.png.webp?itok=IkpmBO28) ](/card)[Card](/card) ### [Card](/card) [ ![Quote logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2833%29.png.webp?itok=h2rKsDhF) ](/quote)[Quote](/quote) ### [Quote](/quote) [ ![content carosel icon](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%2811%29.jpg.webp?itok=h0W8b7g1) ](/carousel)[Carousel](/carousel) ### [Carousel](/carousel) [ ![Employee logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2835%29.png.webp?h=7699e6c3&itok=Po8T6NPm) ](/employees)[Employee](/employees) ### [Employee](/employees) [ ![Iframe logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2836%29.png.webp?h=3089ca13&itok=yg-giCJz) ](/iframe)[Iframe](/iframe) ### [Iframe](/iframe) Previous Next ## Ask for support We use ServiceNow to track all of your requests and questions [Create a ticket now](https://veglobal.service-now.com/s3c?id=service_catalog&root=fcec05201b1649504d79dce2b24bcb50) ![](/sites/g/files/dvc2391/files/styles/crop_freeform/public/image/2024/04/image%2014%20%283%29.png.webp?itok=j1xAfftb)