HI @Ankur Bawiskar ,
Yes its a customised one.
The pink one is happy signal that's the one i wanted to move it to left side of the page and i checked the css of the widget.
* Animation variables */
$transition-base-time: 300ms;
$half: calc(#{$transition-base-time / 2});
$quarter: calc(#{$transition-base-time / 4});
$twice: calc(#{$transition-base-time * 2});
/* Define minimizing transition */
$transition-wrapper-minimize: max-height $transition-base-time ease-in-out,
max-width $transition-base-time ease-in-out $transition-base-time,
border-radius 100ms ease-in-out calc(#{$twice} + 50ms);
$transition-elements-minimize: max-height $transition-base-time ease-in-out,
opacity $transition-base-time ease-in-out,
max-width $transition-base-time ease-in-out $transition-base-time,
min-width $transition-base-time ease-in-out $transition-base-time;
$transition-text-minimize: opacity $transition-base-time ease-in-out,
padding $transition-base-time ease-in-out;
/* Define expanding transition */
$transition-wrapper-expand: border-radius 25ms ease-in-out,
max-width $transition-base-time ease-in-out,
max-height $transition-base-time ease-in-out $transition-base-time;
$transition-elements-expand: max-height $transition-base-time ease-in-out
$transition-base-time,
opacity $transition-base-time ease-in-out;
$transition-text-expand: opacity $transition-base-time ease-in-out
$transition-base-time,
padding $transition-base-time ease-in-out $transition-base-time;
/* Sizing and positioning variables */
$base-height: 56px;
$base-width: 56px;
$cta-max-width: 360px;
/* Theme variables */
/* Light - default */
$light-hover: rgba(255, 236, 241, 1);
$light-background: rgba(255, 255, 255, 1);
$light-font-colour: rgba(29, 37, 60, 1);
/* Dark */
$dark-hover: rgba(0, 0, 0, 1);
$dark-background: rgba(29, 37, 60, 1);
$dark-font-colour: rgba(255, 255, 255, 1);
.happy-portal-call-action {
display: flex;
visibility:hidden;
align-items: stretch;
overflow: hidden;
min-width: $base-width;
max-width: $base-width;
min-height: $base-height;
max-height: $base-height;
transition: $transition-wrapper-minimize;
box-shadow: 0px 0px 16px -4px rgba(0, 0, 0, 10%),
0px 24px 48px -8px rgba(0, 0, 0, 25%);
border-radius: 50%;
/* Default positioning */
position: fixed;
z-index: 9999; // making sure cta is on top of other elements on the page
// default positioning is on the left
flex-direction: row;
&.ng-hide {
opacity: 0;
}
&.ng-hide-add,
&.ng-hide-remove {
transition: all linear 0.2s;
}
&.top-left,
&.top-right,
&.bottom-right,
&.bottom-left {
visibility:visible;
}
&.top-left,
&.bottom-left {
left: 15px;
}
&.top-right,
&.bottom-right {
right: 15px;
}
&.bottom-left,
&.bottom-right {
bottom: 15px;
}
&.light {
background-color: $light-background;
color: $light-font-colour;
svg {
fill: $light-font-colour;
#logo-outline {
fill: #ffd8e4;
}
#logo-left-heart {
fill: #1d253c;
}
#logo-right-heart {
fill: #ff7ea5;
}
}
> .happy-hover {
background-color: $light-hover;
}
}
&.dark {
background-color: $dark-background;
color: $dark-font-colour;
svg {
fill: $dark-font-colour;
#logo-outline {
fill: #ffd8e4;
}
#logo-left-heart {
fill: #1d253c;
}
#logo-right-heart {
fill: #ff7ea5;
}
}
> .happy-hover {
background-color: $dark-hover;
}
}
> .happy-logo,
> .happy-text,
> .happy-dismiss {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
transition: $transition-elements-minimize;
}
> .happy-logo {
min-width: $base-width;
max-width: $base-width;
min-height: $base-height;
max-height: $base-height;
}
> .happy-text {
max-height: 0;
opacity: 0;
> p {
margin: 0;
opacity: 0;
padding: 0;
transition: $transition-text-minimize;
font-family: "Circular Std Book", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol";
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 130%;
}
}
> .happy-dismiss {
max-height: 0;
opacity: 0;
min-width: 0; // min-width is needed for the transition animation
}
/* The expanded format for the call the action */
&.expand {
max-height: 100%;
border-radius: 16px;
max-width: $cta-max-width;
transition: $transition-wrapper-expand;
> .happy-logo,
> .happy-text,
> .happy-dismiss {
opacity: 1;
max-height: 100%;
transition: $transition-elements-expand;
}
> .happy-text {
overflow: hidden;
> p {
opacity: 1;
padding: 18px 12px 18px 0px;
transition: $transition-text-expand;
}
}
> .happy-dismiss {
min-width: $base-width;
max-width: $base-width;
overflow: hidden;
}
}
}
.happysignals-portal-experience-ineditor {
display: block !important;
height: 150px;
width: 100%;
text-align: center;
line-height: 150px;
font-size: 2em;
font-weight: bold;
background-color: $dark-background;
color: $dark-font-colour;
}
