KINDER.

COM
GUIDELINES

September 2021
TABLE OF CONTENT

01. Theme, Menu and Footer

02. Pages components
What are the existing components ready to be used?

03. Technical details

How can I update my website?
How to integrate a local promotion?
BEFORE WE START…
A few clarifications

CMS: Content Management System. We are using Drupal 8 for all Ferrero websites. Like any other CMS, it is a tool to
facilitate Business Units in the content editing. It helps limiting costs and complexities while maintaining governance and
brand identity. The CMS manual will give your local agency the instructions on how to use it.
The different components of the pages are called ‘paragraphs’ within the CMS and their name are included in this
document for reference.

WEBSITE STRUCTURE – GLOBAL RECO

HOMEPAGE

Our mission Products Quality & Ingredients Local initiatives

 01 THEME, MENU AND
FOOTER

kinder.com guidelines
 Theme
Visual Identity
CHRONIC
Fonts
ABCDEFGHIJKLMNOPQRSTUVWXYZ Headers (Latin languages): Chronic
Other languages: to be decided with

The quick brown fox jumps over the lazy dog Business Units.

Body: Noto Sans (global font).

The fonts are all available for

download here.

NOTO SANS
ABCDEFGHIJKLMNOPQRSTUVWXYZ
The quick brown fox jumps over the lazy dog
Colors
Colors are fixed throughout the
website to ensure a global and
common brand visual identity.

These colors are the one we use on the

kinder.com website. For other usages,
please refer to the Global Brand Visual
System.

#f3410e #009fe5 #424242 #faf5ed

 Theme
Menu & Footer
Menu behavior
The menu is non sticky: it disappears
when the user scrolls down, and
reappears as soon as he starts
scrolling up.

Global reco for first level menu: max. 6

items

2nd level menu:

Appears when the user hoovers on the
1st level item.
You can choose between different
views:
- Images (logos) or text
- Optional Promo block on the right
hand side, in order to highlight a video
or a promo. Clicking on it will redirect
the user to the correct page.

Assets:
Product logos: 180px*130px
Banners: 716px*356px

Footer
The footer links to legal elements and
to the country selector (accessed by
clicking on the map).
In case of a multi-language website,
the user can switch language from the
footer.

Languages Country selector

 Theme
Menu on mobile

The structure and the behavior of the

menu is as per desktop version.

Navigation
The user needs to click on the
‘hamburger’ to see the menu
appearing.
When there is a second level menu,
the items are displayed on a separate
screen, as per screenshot enclosed.

NB: you can choose to hide/show a

specific item from the mobile navigation.

2nd level menu

1st level menu

 02 PAGES COMPONENTS
How are the pages structured?
What paragraph can I add to my page?

kinder.com guidelines
HEADERS NAME ASSETS SPECS. FLEXIBILITY

Half width image: Reco: max. 5 banners.

- Desktop: 1200px*818px A little a lot banner mandatory.
Main Carousel - Mobile: 900px*720px
Flexible rotation time of the slides.
Mainly used as first
Full width image:
component in Homepage
- Desktop: 1920px*818px Title: possibility to have a text or an image
- Mobile: 900px*1091px (e.g. A little a lot) logo).

Three background colors are available: blue,

cream, grey.
Product: 1200px*867px
Product Main Carousel White frame behind logo, commercial:
Logo: 170px*93px
Right part of the banner in case of full optional elements.
Product-oriented
image: 1200px*867px
No character limitations.

White frame on left hand side: fixed.

- Possibility to have a carousel with flexible

Big image: rotation time
Full width header - Desktop: 1920px*768px - Optional text
- Mobile: 900px*620px - Optional grey overlay
2 templates in CMS:
- Big image Small image: Body copy automatically goes below the
- Small image - Desktop: 1920px*557px image on mobile.
- Mobile: 900px*573px
Can contain .GIF
HEADERS NAME ASSETS SPECS. FLEXIBILITY

Hub & Ingredient

header
Image / Video cover: 1286px*576px 2 doodle options
2 templates in the CMS: Body text: optional
1. Hub Header

2. Ingredient header
Image: 634px*557px Heart doodles optional

Ingredient Hub Images: 455px*410px 3 visuals (not editable)

Hoover effect on desktop.
PARAGRAPH: IMAGES ONLY TEMPLATE NAME ASSETS SPECS. FLEXIBILITY

Image / Video cover: 1280px*600px Image or video

Large image (flexible height) Optional legend copy

5 items per row: 295px*411px

Boxes can be clickable
4 items per row: 376px*524px
Banners 3 items per row: 392px*546px
Up to 5 boxes per row on desktop
and 2 on mobile (flexible)
2 items per row: 534px*745px

Media Carousel with Images: 280px width, flexible height

Optional dotted line in the background
text Optional description line per image

Product logo Images: 400px*200px -

PARAGRAPH: TEXT AND IMAGES TEMPLATE NAME ASSETS SPECS. FLEXIBILITY

Optional elements:
- CTA
- Shadow behind image
Article Link Image: 640px*472px
- Doodles (several combinations already
predefined)
- Background color (white or creamy)

Category link creamy Image: 640px*472px Background color: fixed

Round image and body Images: 500px*500px

Text and image can be mirrored
copy Doodles: optional
PARAGRAPH: TEXT ONLY TEMPLATE NAME ASSETS SPECS. FLEXIBILITY

All text optional.

Regular text - Blue color: fixed.
Background: creamy or white.

2 different doodle combinations

Possibility to add images next to the text
Text & Image -
paragraphs.
Background: creamy or white.

Title optional.
Simple text - Doodles: fixed.
Background: creamy or white.

Creamy block - Background & doodles fixed.

Blue block - Background & doodles fixed.

Title text - 3 different font sizes available.

PRODUCT RELATED COMPONENTS NAME ASSETS SPECS. FLEXIBILITY

Two tabs at the top allowing to switch

between the two views.

- Optional link to Ingredients Hub at the

Product ingredients &
bottom.
nutritional information
Doodles: two combinations available
depending on the target audience of the
product.

Images: 725px*512px Flexible number of tabs

Seasonal tabs block Note: the white background should be Each tab can have its own URL, which can be
part of the image. useful for advertising purposes.

Hoover effect to see the inside of the

product on desktop.
Desktop: 432px*346px
Product Hub Mobile: 324*259px
Global reco: use the powerbrand approach
to display your products.
xx NAME ASSETS SPECS. FLEXIBILITY

Ingredient selector Optional elements:

- Doodles
Used at the bottom of each Image: 106px*100px - Copies
ingredient page to drive - Ingredient names (appearing on desktop
navigation only, when hovering on the bubble)

Content has to be linked to the local product

Homepage product portfolio.
slider Image: 600px*480px
Hoover effect on desktop to see the inside of
Used in Homepage the product.

Kinder Manifesto
module First title: uploaded as a visual.
TBC Kinder a little a lot logo: optional, but not
Currently used in the A little a editable.
lot page
 Product description

Different background color

combinations available in the CMS
(catering for white or creamy
background).

Image: 728px*455px, PNG format

Note: in the example enclosed, the
doodles are part of the image.

Kinder Story Brand

Recommended to stretch the brand and amplify the
brand’s visual presence.

Image size: 544px*388px

NB: the background color is fixed.
 Template name in CMS: Teaser boxes

TV Brand Block
TV Frame
The video inside is meant to be a video loop (uploaded as a video),
ever repeating.

Template name in CMS: Article boxes Size of content within TV doodle: 1920px*1200px.

Boxes with Kinder colata

2 available templates depending on the nature of the page
(one being more editorial than the other)

Flexible number of boxes, copies & doodles editable.

Size of the image:

427px*299px
Social media tiles

Module behaviour
The images can rotate if the user clicks on them.
Copy line optional.
When clicking on the image, the user is automatically
redirected to the social media page in an external window.

- 1 or 3 elements.
- Possible content: image or GIF
- Size of the images: 608px*450px

Partners
This block mostly suits initiatives purposes to showcase
affiliated organizations.
The borders are optional.

CTA
The page can be internal or external.
Toy Carousel
If more than one carousel, the copy and the toy frame will be
mirrored (as per thumbnail of the page on the left).

Localizable elements
- Copies
- Toys: 480px*384px (white or transparent background)

Product Range
Localizable elements
- Background color (blue, creamy, grey)
- Dotted line & doodles: optional
- Size of assets: 320px*320px, PNG format
Transition wave
Transition module to swiftly move between white and
creamy backgrounds. Colors can be reversed for both
versions.

Full width cross link

Optional copies (header & body).
Possibility to have the Kinder a little a lot logo in white at the
beginning.

Optional elements:
- Size of visual:
- Desktop: 1920px*828px
- Mobile: 768px*931px
- Grey overlay
- CTA
- Background colors at the top & bottom of the component
 Tabs
This component can either link to
pages or open pop ups.

Recommended within product pages

for powerbrand approaches.

Pop up layout

…Did not find what you were looking for?

Feel free to send us your suggestion of component or improvement of existing one. If it is something
that is needed by other countries, we will evaluate the feasibility of implementation at global level.
Flipping tiles

Hovering over any of

the card reveals a
page flip – clicking
on the card turns it
around, and you see
a description text on
the back.

Sizes of cards:
- 280px*280px

Optional elements:
- Background of cards creamy or
white
- Background of module creamy or
white
- Title and body copy left aligned or
centered
- Flexible number of cards
- Hover effect/page flip can be
switched off
- Optional doodle dotted line
 The Kinder Story
Covers

When clicking on The Kinder Story

from the menu, the user lands on the
first cover.

The CTA “Let’s begin” links to the next

chapter cover (which we can glimpse
on the right).

After this, there are two kinds of

First cover covers:
- Video loop covers (chapters 1 & 3):
on these covers, a video loop is played
in the background.

- Chapter covers (other chapters):

these covers link to detailed chapters.
Their format is fixed. By clicking on
‘Explore’, the user is linked to the
details of the chapters.

Clicking on the arrows should redirect

the user to the previous or to the next
chapter.
The covers are also draggable
(especially erlevant for mobile).

Video loop cover Chapter cover

Chapter 2 Chapter 4 The Kinder Story
Detail pages
Chapter 5
When clicking on ‘Explore’ from a
chapter cover, the user lands on the
detailed page of the chapter.
The timeline is visible at the beginning
of the page.

Chapter 6 The CTA at the end of the page links to

the next chapter cover.

The images are static; the behavior of

the other components of the page will
be explained in the next slides.

CMS: All Kinder Story components can

be reused in other pages, and the
names of the associated paragraphs
start with ‘Kinder Story …’.
Further details can be found in the
CMS manual.
Age check

NB: As any content shown on a local

website needs to be compliant with the
Advertising Pledge anyway, the
functionality is not mandatory from a
Central Legal and Advertising Pledge
perspective. Should it be needed, it will
then appear in a pop up window when
the user enters the website.

The age gate will start with asking for

the birth year of the user.
After entering the birth year:
- If the user is clearly more than 12
years old, the text turns blue and
the CTA becomes visible. The user
can enter.
- If the user is clearly less 12 years
old, the text turns red. A copy
appears below, saying that the
page cannot be shown.
- In some cases, the birth year is not
enough to determine the exact age
of the user (e.g. we are in 2017: if
the user is born in 2005, he can be
either 11 or 12 years old). In this
case, the user is asked to fill in his
month and day of birth.

If any more information is needed,

some copy lines and an “info box”
have been added below.
 MAINTAINING YOUR

03 SITE
How is the website performing?
How can I update it?
How to integrate a promotion?

kinder.com guidelines
 KINDER.COM’S PERFORMANCE
Thanks to the increasing amount of engaging content on local websites, the popularity of the kinder.com has jumped from #778K
to #4K in two years and a half, allowing us to compete with key digital players.

GLOBAL WEBSITES’ POPULARITY

RANKING
More engaging content SEPT. 17 JAN. 20
at local level
#561 #403

Traffic increase
#2,7K #2,5K

#7,7K #4K
Higher popularity of
kinder.com
#65K #5,6K

#245K #52K

Higher visibility & #282K #117K

organic traffic
increase
#778K #292K

#990K #2,2M
Source: Alexa.com
 HOW TO MAINTAIN & UPDATE
MY WEBSITE?
A helpdesk is in place for you and your local agency to get support from our global agency (FFW). Requests can vary from
simple questions to technical bugs or content updates.
Communication takes place via the JIRA ticketing tool.

We strongly recommend you to have a local agency for more autonomy, simplicity and easiness of processes. Should you have
any constraints, you can use FFW for your content updates, using the Jira ticketing tool. All requests requiring more than 3
hours of work are to be paid locally.

For a local agency to get access to the CMS, please write an email to DSI (email address at the end of the document) specifying
the country & the brand, and giving the email address of the required person(s). A training video will be sent together with the
credentials.

NB: for local content developed by your local agency apart from the centrally provided templates, you need to speak to your local
agency.
 ROLES & RESPONSIBILITIES
The website content & maintenance is fully under the responsibility of the Business Unit. Central team
remain available for any kind of support.

GLOBAL SCOPE LOCAL SCOPE

- Hosting of all Kinder websites and overall
governance
- Platform management
- Technical support to local agencies
- New components development
- SEO code-related updates (e.g. titles’ structure,
sitemaps)
- Content updates using already existing
components (new visual identity, product
launch,...)
- Promotions’ design, development & integration
in line with the guidelines (URL starting with
kinder.com/…, see next pages)
- SEO content-related updates, e.g. content
optimization based on keywords
 MEDIA FILES & TECHNICAL SPECIFICATIONS
IMAGES
Please follow carefully the recommended dimensions. A wrong image size can lead to a wrongly displayed image on some browsers.
Naming: use relevant keywords in the file name of each image for SEO purpose.
File size: please don’t upload any visual heavier than 300ko. This metric is very important as it affects your site’s performance and its
Google ranking.

VIDEOS
Videos should be uploaded in mp4 format and hosted on the Akamai Ferrero video platform. More information in this chapter of the
CMS manual.

BREAKPOINTS
The website is responsive and automatically adapts to screen sizes following given rules and respecting pre-determined breakpoints:
600px and 900px.

TRACKING & ANALYTICS

Google Analytics codes are added on each website, tracking and reporting the standard user behavior. It is IP anonymized for GDPR
compliance. Your local agency can request an access to Google Analytics for further customization.

URL USAGE
• Technical url: it is always kinder.com/country/language. E.g.: kinder.com/it/it; kinder.com/be/fr.
• The communication URL (e.g. on pack or POS) should be kinder.com and users will be automatically redirected to the local
kinder.com.
 INTEGRATING YOUR LOCAL INITIATIVE
The kinder.com needs to be the official communication platform at local level. All initiatives & local promotions
need to be hosted within the kinder.com domain.

… …
kinderchoc maxiking.de
olate.ru

kinder-
joy.ru kinder.com kinder.com
/ru/ /de/ …

milchschnitte
.de

KINDER.
… COM
kinderchoc
kindersorpre
kinder.com kinder.com olate.co.kr
sa.kinder.it /it/ /kr/
natale.kinder. kinder-
it joy.co.kr …
 HOW TO INTEGRATE YOUR INITIATIVES
DOMAIN INTEGRATION
Host everything locally, and make it part of brand.com, including the final URL:

Include the Locally managed

brand.com
menu and
footer into the brand.com web
local page components,
globally managed
 DOMAIN INTEGRATION

Local activation is developed and hosted by the local agency (according to Ferrero’s security standards) on a different
domain and integrated into the www.kinder.com domain by adding Akamai as a proxy which re-writes the URL and
forwards the requests to your local host in real time.

AKAMAI
global
proxy

yourhost.co kinder.com
m Visitors

www.kinder.com/country/lang/xp/yourcampaign/*
www.yourhost.com/uk/en/xp/campai URL re-write
g n/*
Done by Ferrero
IT,
once local URL is
available

INSTRUCTIONS FOR LOCAL AGENCIES: find all requirements and working examples at this page in Confluence. If you don’t access to Confluence please ask to Global Agency
 TECHNICAL REQUIREMENTS
For a local promotion to be integrated in such a way, here are some pre-requisites:

Valid SSL Certificate

Integration of kinder.com menu & footer provided by the Global Agency
Integration of Google Tag Manager
Host all your local assets and reference them using the absolute path, e.g.: /cc/ll/xp/campaign/assets. The final
URL of each asset (CSS/JS/images) will become https://www.kinder.com/cc/ll/xp/campaign/assets/img/file.png
URL Structure:
/cc/ll/xp/campaign
| | |
| | +-- folder visible in the final URL
| |
| +-- /xp standard prefix for external pages
|
+-- /cc=country code, /ll=language code
Name/campaign according to your objectives

You can host multiple /campaign/subfolders!

THIS LIST IS NOT EXHAUSTIVE: find all updated requirements at this page in Confluence.
 STEPS
1 Inform Central Digital Marketing Team about your promotion
and plan with the local teams the cybersecurity activity.

2 Develop the local promotion following the pre-requisites.

• Visit Confluence for technical details.
• For header/footer questions, Jira and Confluence Access, contact the brand’s Global Agency.

3 Request new Akamai URL re-write integration.

• http://jira.ferrero.com/projects/BDIxyz (to be confirmed)

4 Coordinate Legal and Security mandatory steps.

• Organize with the brand Global Agency the scan and integration of the OneTrust cookie
banner.
• Execute the cybersecurity activity and fix vulnerabilities (if any).

5 Go Live
 DOMAIN INTEGRATION EXAMPLES
BRAND.COM URL LOCAL DOMAIN URL

https://www.kinder.com/ro/ro/xp/cine-e-cel-mai-nazdravan-din-tara https://kinder.whitecat.ro/ro/ro/xp/cine-e-cel-mai-nazdravan-din-tara

https://www.kinder.com/de/de/xp/kinder-circus https://www.kinder-roncalli.de/de/de/xp/kinder-circus

https://www.kinder.com/de/de/xp/pixi https://pixi.kinderschokolade.de/de/de/xp/pixi

https://www.kinder.com/ru/ru/xp/chocolate/promo https://kinder-2019-4.letoagency.ru/ru/ru/xp/chocolate/promo

https://www.kinder.com/pl/pl/xp/wspolneczytanie https://wspolneczytanie.h2h.tech/pl/pl/xp/wspolneczytanie

https://www.kinder.com/kz/ru/xp/natoons https://www.kinderpromo.kz/kz/ru/xp/natoons
 GUIDELINES FOR AGENCIES
Web Act ivity - Proces s Summar y

1 2 3 4 5 6

Request Contact the Develop the Integrate the Rewrite URL Perform the
development tools cybersecurity Web Activity Cookie Banner Penetration Test
access

Go-live
 Request development tools access

1 The Local Agency should first contact the Brand Global Agency by email to access Jira,
Confluence, Drupal with a clear request, by:

• Providing a resumé of the project (brand, promotion, key dates).

• Providing the Email addresses which will need access.
• Requesting the Brand web book (if any).
The Local Agency should then receive a direct invitation on Jira.
Jira will be the main channel to communicate during all the development process.
IMPORTANT NOTE: The Global Agency is the main point of contact during the project, they are reachable trough Jira. If you encounter any issue to
contact them, please
directly refer to the Brand Global Digital team explaining briefly your problem or for any other topic, please refer to the “Contact and availabilities” slide.

Inform the Cybersecurity

As the Penetration Test activity should be realized in a specific timeframe - between the end of
development and before the go-live - the Central Cybersecurity Team should be informed at the
2
very beginning of the project in order to plan their activities accordingly.

Inform Cybersecurity Pentest Execution The Local Agency must liaise with the local IT Team
providing all the information of the project (timeline,
provisional go- live date and technical information).
As a next step:
Activity Activity Activity Cybersecurity
Go-Live
Assessment Validation Development Activity
• Local IT team will share the latest version of
"Development Guidelines for Digital Projects“.
• Local IT team will liaise with the Central Cybersecurity
e.g., March 20th e.g., June 10th Team to plan a cybersecurity activity (Penetration Test).
e.g., March 1st e.g., June 30th
 Develop the web activity
3
The Local Agency must develop the activity following the “Development
Guidelines for IT Projects” (available through Local IT contact).
The development is based on 9 steps described in detail in the specific
guidelines for digital applications chapter (Domain ownership, Browser's
compatibility, User registration, Content, Analytics and SEO, etc.).

For any guidance regarding the development, the Local Agency can refer to
the Brand Global Agency.

Integrate the Cookie Banner

4
The cookie banner can be configured in parallel of the development anytime once
the full domain is available in production with the following procedure for the Local
Agency to follow:
• Open a Jira ticket with "Cookie Banner" issue type.
• Complete the activities (cookie categorization and legal related contents entries)
in collaboration with the OneTrust solution System Integrator.
• Once done, verify that the cookie banner is present on the page, then close the Jira
ticket.
 URL Re-write
The local activation is developed and hosted by the Local Agency on
a different domain and integrated into the brand domain by adding Akamai as 5
a proxy which re-writes the URL and forwards the requests to your local host
in real time.

The final URL has a specific structure such as:

https://www.brand.com/country_code/language_code/xp/campaign_name/
which is explained in the dedicated guide “BDI Local Activation”, to be requested
through the Brand Global Agency.

The URL rewrite activity on Akamai is in charge to the Ferrero System Integrator. To request this activity,
the Local Agency must create a ticket on Jira at least 10 days before go-live, with issue type “Local
Activation“ including the following elements:
• Country involved.
• Start URL.
• Destination URL.
• UTM parameters (if applicable – to be checked with your business contact).
• Request to setup a Basic Auth in case it is not possible directly on the hosting platform (to protect
the website before the go live).
 Perform the Penetration Test
6 Once the development of the local activation is finished, the Local Agency will provide
the production URL to the Central Cybersecurity Team and Ferrero local IT. A detailed
report with findings shall be sent back. Those vulnerabilities must be fixed by the
Local Agency before going live.

Inform Cybersecurity Pentest Execution

• The Pentest activity must be processed
enough in advance before the go-live to
ensure the proper fixing of the
Activity Activity Activity Cybersecurity
vulnerabilities. Assessment Validation Development Activity
Go-Live

• When the vulnerability is fixed, the agency

must inform the cybersecurity and a new
scan is processed. e.g., March 20th e.g., June 10th

e.g., March 1st e.g., June 30th

Go-live
7
Once the previous steps are completed, the Local Agency must coordinate
with the Ferrero Teams and the Brand Global Agency the final authorization
and desired period for the go-live (i.e., Wednesday the 14th in the morning, or
better at 10 am).

Note: We avoid Thursday afternoons, and we don’t go live Fridays (except

exceptional business needs).
Contact and availabilities

In case of any question related to the Brand/content topic you can refer to:

• Ferrero Brand Local Marketing Team / Ferrero Central Digital Marketing

Team
• Brand Global Agency

In case of any question related to technical/development activities you can refer to:

• Ferrero IT Digital Marketing Competence Center – DSI -

dsi.internet.it@ferrero.com

In case of any question related to cybersecurity activities you can refer

to:

• Ferrero Cybersecurity - cybersecurity@ferrero.com

Designed
by Juls

THANK YOU!
More info? Please contact:
Kinder Digital: Celeste Tucci, Teodora Kostadinova, Giorgia
Leogrande

kinder.com guidelines