Absolutely positioned step in the right (or any other corner) with person image.



Class name:


ims-player-message


HTML Code:


<div class="ims-player-message-header">
  <img alt="" height="44" src="https://files-storage.inlinemanual.com/d3fbc10a-3e44-42e5-986f-2f15ce0bbcf1.png" width="44" /> <strong>John Doe</strong>
  <div>CEO</div>
</div>
<div>
  <strong>Hi {{first_name|there}},</strong><br />
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet velit feugiat, vestibulum leo sit amet, placerat ligula. Sed convallis massa in egestas aliquam. Mauris tincidunt euismod turpis ac aliquet. Sed mollis egestas quam, eu egestas massa. Integer enim eros, convallis quis euismod et.
</div>

CSS Code:


.ims-player-message {
    position: fixed;
    bottom: 104px !important;
    right: 36px !important;
    top: auto !important;
    left: auto !important;
}
.ims-player-message .inmplayer-popover-inner-content .ims-player-message-header {
    width: 328px;
    display: block;
    position: absolute;
    bottom: -68px;
    background-color: rgba(255,255,255,0.4);
    padding: 4px;
    border-radius: 8px;
    left: -1px;
}
.ims-player-message .ims-player-message-header img {
  border-radius:50%;
  margin-right:10px;
  float:left
}