Skip to main content

Customize Connect widget

<html>
<head>
  <style>
    iframe[name='vezgo-connect-widget'] {
      border: 1px solid gray;
      width: 300px;
      height: 500px;
      display: none;
    }
  </style>
</head>
<body>
  <nav>Nav bar</nav>
  <section>
    <h1>Connect your account</h1>

    <button id="connect">Connect</button>
    <iframe name='vezgo-connect-widget'></iframe>
  </section>
</body>
</html>

Under the hood, the Connect Widget is loaded inside a <iframe name='vezgo-connect-widget'> element. By default, the .connect() method appends the iframe at the root of your page's <body>, with special styling so that it appears as an overlay inside the page.

You can customize the styling of the widget overlay via the vezgo-connect-widget.

If you need to control where the iframe is inside your page, you can pre-create the <iframe name='vezgo-connect-widget> anywhere in your page and the .connect() method will load the Connect Widget inside that element instead of creating a new one.

NOTE: the JS SDK will add display: block style to the iframe when opening the Connect Widget, and display: none when closing it.