Password Protect

Custom HTML Snippets

Sometimes you need to add custom HTML to the <head> or the <body> tag of your project. This can be custom scripts, styling, or even content.

In Vev you can add HTML in the project itself, but you may also add the code via this integration. The latter is recommended if you want to add the snippet to all the projects that are published to a given hosting.

Custom Scripts

Sometimes you may need to add a custom script to the <head> or the <body> tag of your project.

This you may do in the project itself, but you may also add the script via this integration. The latter is recommended if you want to add the snippet to all the projects that are published to a given hosting.

You are allowed to specify the URL of the script, where it should be placed, as well as whether it should be deferred or loaded asynchronously.

Favicon

A favicon is a small icon associated with a website, web page, or web application. It’s displayed within the browser tabs and bookmarks bar.

The favicon is also used in the browser history, toolbar apps, bookmarks dropdown, search bar, and search bar recommendations.

The presence of a favicon makes it faster for the user to find the website s/he’s looking for. The favicon can also indirectly affect engine optimization (SEO), and it also helps you build brand recognition and brand trust.

Requirements

The favicon should be a square formatted image.

Mobile Browser Color

With this integration, you can apply your own brand colors to the address bar in a mobile browser. Only applicable for iOS and Android.

Password Protect

Use the Password Protect Integration to conceal your content behind a password entry dialog.

To customize the password plugin you cannot use Vev's normal drag-and-drop features. You can however combine the Password Protect Integration with Custom HTML Snippets to adjust position and other style settings using CSS.

To do so, add something like the following to the Custom HTML Snippets' End of body field. You are of course free to adjust the CSS to match what you need.

<style>
.vev-password-page {
  background: #3B3B3B;
  color: #000;
}

.vev-password-form {
  background: #fff;
}

.vev-password-form h1 {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='40' height='40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' rx='8' fill='%23EE2B3B'/%3E%3Cpath d='M26.25 18H25v-2.5c0-2.773-2.266-5-5-5-2.773 0-5 2.266-5 5V18h-1.25a2.492 2.492 0 0 0-2.5 2.5V28c0 1.367 1.094 2.5 2.5 2.5h12.5c1.367 0 2.5-1.133 2.5-2.5v-7.5c0-1.367-1.133-2.5-2.5-2.5Zm-9.375-2.5A3.11 3.11 0 0 1 20 12.375a3.134 3.134 0 0 1 3.125 3.125V18h-6.25v-2.5Zm10 12.5a.642.642 0 0 1-.625.625h-12.5a.617.617 0 0 1-.625-.625v-7.5c0-.313.273-.625.625-.625h12.5c.313 0 .625.313.625.625V28Z' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1em 1em;
  padding-top: 1.5em;
}

.vev-password-input {
  background: #F3F3F3;
  border: 0;
  border-radius: .45em;
  color: #000;
}

.vev-password-input:hover {
  background: #F3F3F3;
  -webkit-box-shadow: 0 0 0 2px #C2C2C2;
          box-shadow: 0 0 0 2px #C2C2C2;
}

.vev-password-button {
  padding-left: 2em;
  padding-right: 2em;
  color: #fff;
  background: #000;
  border-radius: .45em;
}

.vev-password-button:hover {
  background: #222;
}

@media (min-width: 400px) {
  .vev-password-form {
    padding: 50px;
    border-radius: 20px;
  }
}

@media (min-width: 500px) {
  .vev-password-form {
    padding: 100px;
    border-radius: 40px;
  }
}
</style>

Be aware that this only hides your content behind an input, your content is NOT secured with this integration. Tech-savvy users may be able to circumvent the password check as the content is static, which means the key to unlocking it is in the project.