[IMP] website: improve design of new s_whatsapp snippet#5164
Open
anso-odoo wants to merge 3 commits into
Open
Conversation
Goal: 1. To make it easy for visitors to connect with the company as soon as they land on the website. 2. It provides a quick and familiar communication channel while also helping the business collect external user contacts. Key Features: - Clicking the snippet opens a chatbot with a welcome message - Input box lets users type queries; on send, user is redirected to personal WhatsApp with prefilled message - Supports multiple options: size, shape, agent name, description, avatar, etc. - Allows configuring company/WhatsApp contact number * Default: company's number prefilled * User can override with a custom number - If the WhatsApp module (enterprise) is installed, the company can use a phone number generated from the WhatsApp Business account configuration. * After that, a channel and contact card are automatically created for each new customer.(existing behavior, not a part of this commit) - Note that since discuss and livechat bubbles have the same position as whatsapp snippet it's very hard to position 3 widgets at the same location so that's why we added position option so that user can change the position to left side as well. task-4849720
*=website_sale Set preview=false by default in replaceMedia builder action to avoid repeating preview=false in XML everytime. task-4849720
|
This PR targets the un-managed branch odoo-dev/odoo:master-whatsapp-snippet-chdh, it needs to be retargeted before it can be merged. |
anso-odoo
force-pushed
the
master-whatsapp-snippet-chdh-anso
branch
from
8787373 to
a1e4144
Compare
dhruv2x
force-pushed
the
master-whatsapp-snippet-chdh
branch
2 times, most recently
from
e117053 to
a09bfd4
Compare
chgo-odoo
requested changes
May 15, 2026
chgo-odoo
left a comment
chgo-odoo
left a comment
There was a problem hiding this comment.
Hello @anso-odoo 👋
Thanks for your work on this, I left minor comments to clean-up the files a bit.
Thanks !
| border-top-color: var(--o-wa-message-bg); | ||
| border-right: 0; | ||
| transform: rotate(270deg); | ||
| } |
There was a problem hiding this comment.
Indentation
+ &::before {
+ content: '';
+ @include o-position-absolute($bottom: -12px, $left: 4px);
+ border: 8px solid transparent;
+ border-top-color: var(--o-wa-message-bg);
+ border-right: 0;
+ transform: rotate(270deg);
+ }|
|
||
| right: map-get($spacers, 4); | ||
| bottom: map-get($spacers, 4); | ||
| z-index: 1000; |
There was a problem hiding this comment.
Can we use a SCSS variable instead? $zindex-dropdown or even a lower one if we have the opportunity
Comment on lines
+120
to
+121
| width: 2.25rem; | ||
| height: 2.25rem; |
There was a problem hiding this comment.
I know it was already there but I'd not enforce the width... It looks quite small on mobile.
Comment on lines
+123
to
+125
| &:hover { | ||
| background: var(--o-wa-green-hover); | ||
| } |
| <div class="wa-input-box align-items-center gap-2 p-2"> | ||
| <textarea name="wa_message" class="wa-user-message form-control flex-grow-1" t-att-placeholder="messagePlaceholder" rows="1"/> | ||
| <div class="o_not_editable"> | ||
| <button class="wa-send btn d-flex align-items-center justify-content-center border-0 p-0 rounded-pill" aria-label="Send message"> |
There was a problem hiding this comment.
Already there prior to your changes but I think we can cleanup this markup... flex shouldn't be needed
| <textarea name="wa_message" class="wa-user-message form-control flex-grow-1" t-att-placeholder="messagePlaceholder" rows="1"/> | ||
| <div class="o_not_editable"> | ||
| <button class="wa-send btn d-flex align-items-center justify-content-center border-0 p-0 rounded-pill" aria-label="Send message"> | ||
| <i class="fa fa-paper-plane"/> |
Comment on lines
+21
to
+22
| <button class="o_not_editable btn p-0 position-relative d-inline-flex align-items-center justify-content-center rounded-circle wa-fab o_pos_right" aria-label="Open WhatsApp chat" contenteditable="false"> | ||
| <i class="fa fa-whatsapp fs-4" contenteditable="false"/> |
There was a problem hiding this comment.
Can you double check if we need contenteditable="false" on both the button and the icon? + missing aria-hidden="true" on the icon
| </div> | ||
| <p class="m-0" t-esc="ctaLabel"/> | ||
| <button class="wa-cta-btn btn w-100 py-3 rounded-4 border-0" t-att-aria-label="ctaLabel"> | ||
| <i class="o_not_editable fa fa-whatsapp me-2"/> |
There was a problem hiding this comment.
Missing aria-hidden="true" + why does this icon needs o_not_editable and not the others ? Probably not needed
| } | ||
|
|
||
| .wa-input-box { | ||
| display: flex; |
| </div> | ||
| </div> | ||
| <!-- CTA mode --> | ||
| <div class="wa-cta-box justify-content-center p-2 border-top"> |
There was a problem hiding this comment.
You can probably remove justify-content-center since the button inside is w-100
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Improved:
task-6113374