Conversation

The is-active CSS classes are present on all hackFridayChat_message components to play an animation on the message when it appears. This CSS class must be added to the component after being injected to properly play the animation.
The content can contain both plain text and HTML.

Sport

TWIG component : Betclic/_sport/_webapp/_twig/_components/_hack_friday/_chat/_conversation.twig
CSS components : Betclic/_sport/_webapp/_css/_components/_chat/_conversation/_avatar.scss
Betclic/_sport/_webapp/_css/_components/_chat/_conversation/_conversation.scss
Betclic/_sport/_webapp/_css/_components/_chat/_conversation/_messages.scss
Betclic/_sport/_webapp/_css/_components/_chat/_conversation/_preloader.scss
Betclic/_sport/_webapp/_css/_components/_chat/_conversation/_speaker.scss

Bot/Human agent speaker link

Default

Single

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Group

Irure ad Lorem

Non irure irure veniam qui excepteur proident ex dolor non minim esse aliqua.

Ullamco incididunt elit nostrud non commodo ex aliqua officia aute qui.

Ordered list

Velit id non ad aute aliquip ipsum :

Consectetur nostrud fugiat quis velit duis ullamco proident.
Magna magna officia aliqua quis consequat aliqua ipsum id laborum adipisicing sint.
Veniam sunt adipisicing esse nostrud dolore fugiat deserunt velit dolor anim pariatur culpa sint.

Fugiat est sint proident laboris sunt ipsum aliquip magna aliquip voluptate.

Unordered list

Fugiat est sint proident laboris sunt ipsum aliquip magna aliquip voluptate.

Fugiat ut cupidatat :

Aliqua mollit in reprehenderit nisi consequat ea dolor.
Nulla cillum est nulla elit sit anim ullamco est consequat occaecat aute commodo fugiat eiusmod.
Sunt nulla proident officia et commodo eu do esse aute.
Irure ut nostrud nulla qui officia dolore commodo.

Highlighted text

Bold text

Irure eiusmod do commodo esse et qui excepteur laboris ullamco laborum est nisi eu.

Line break

Ipsum aliqua pariatur.
Irure : FGDHDG
esse et qui excepteur laboris ullamco laborum est nisi eu.

Emojis

🔥 Veniam amet exercitation elit irure excepteur veniam veniam ⏳.

Error

❌ Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Writing

Contextual classes on the chat_speaker component : is-writing

User speaker link

Default

Contextual classes on the chat_speaker component : is-user

Single

Sint dolore qui amet amet exercitation culpa reprehenderit do cillum commodo pariatur Lorem.

Group

Consectetur nostrud

Magna magna officia aliqua quis consequat aliqua ipsum id laborum adipisicing sint.

Veniam sunt adipisicing esse nostrud dolore fugiat deserunt velit dolor anim pariatur culpa sint.