Table of Contents

Modifying Embed Size

Abby Updated by Abby

When embedding a container in a web page it's sometimes needed to adjust the size or position of the container.

Here's how to do so using various container types:

LIVECHAT

When changing the size or position of the Livechat we need to apply the CSS directly to the parent container.

Here's an example of how we can move the Livechat to the left of the screen:

When modifying the size of the popup I wanted the iframe to be in the center of the screen, so I used the viewport height and viewport width attributes (VH and VW), if you'd like the iframe to be to the left or to the right of the screen just adjust them accordingly.

The code:

.PopupContent{
  max-width: 50vw;
  max-height: 50vh;
  margin-top: 25vh;
  margin-left: 25vw;
  margin-right: 25vw;
}

Result:

EMBED

The easiest way to change the width and height of the embed is directly in the embed script, while you won't be able to change the width until you've pasted the snippet, you can change the height from the embed page:

You can also add the attributes to the container ID (#myLandbot) in your parent page:

Adding Media Query

When we want to modify the size of one of our embedded bots while maintaining the full viewport in smaller devices we can do so with the media query option. In the example below, we're only applying the attributes to screens with a minimum width of 600 pixels:

Here's the before:

The result:

The code:

@media screen and (min-width: 600px) {
  .PopupContent{
  max-width: 50vw;
  max-height: 50vh;
  margin-top: 25vh;
  margin-left: 25vw;
  margin-right: 25vw;
} }

How did we do?

Customize and embed your WhatsApp Widget

Conditional Welcome: Direct the Flow of Your Bot Based on External Parameters

Contact