How to Center Trigger Widgets

There are two main ways to center any of the triggers that are embedded onto your website. The first is through HTML and the second is via CSS.

Centering using HTML code is the easiest and fastest way to center your widget and what we recommend to try first. However because of the way the Facebook messenger optin box is sized to display names of all lengths correctly sometimes widgets can still look a little off center. If you experience this CSS centering may work better for your application.

Center Using HTML Code

On your website locate the embed code for the trigger you would like to center.
Add <center> to the beginning of the code and </center> to the end of the code.

Your finished embed code will look similar too the code below:

<center><div id="opesta-plugin-RVOOAQ8HG5"></div><script src="https://api.opesta.com/plugins/RVOOAQ8HG5.js"></script></center>

Center Using CSS

Centering using CSS is a bit more advanced however many page builders now allow you to add custom CSS to a page easily and quickly.

Determine the CSS id for your Opesta widget by copying the div id found in the embed code of your trigger.

2. Add the following CSS to your style sheet replacing "opesta-plugin-JYH178M3TD" with the div id for your widget that you found and copied in step one.

#opesta-plugin-JYH178M3TD {
  width: 30%;
  margin: 0 auto;
}

**Please note the width percentage listed in the code above is what we have found works best in most situations. However if your widget looks a little off center after applying this CSS you can adjust this percentage higher to move for your widget to the left or lower to move it to the right.