Custom HTML snippets
We offer an integration Custom HTML Snippets to empower you with the capability to inject your code directly into your webpage within Vev's platform. This integration proves especially valuable when you find that certain elements are missing in Vev, like the ability to add tracking codes to the head section of your webpage, especially if your preferred tracking platform is not listed.
Requirements
For optimal webpage performance, it is essential to carefully choose the injection point of your custom HTML snippet. You have four placement options:
Start of Head: Placing your custom HTML snippet at the beginning of the
<head>the section ensures that it loads early in the page rendering process. This is particularly beneficial for crucial scripts or stylesheets that need to be applied before other content is rendered.End of Head: Injecting your custom HTML snippet at the end of the
<head>section allows it to load after essential resources have been loaded. This can be useful for supplementary scripts or stylesheets that don't require immediate loading.Start of Body: Adding your custom HTML snippet at the beginning of the
<body>section ensures that it loads before other content in the body, potentially improving the overall perceived loading speed of your webpage.End of Body: Placing your custom HTML snippet at the end of the
<body>section allows it to load after all other content in the body has been rendered. This can be helpful for non-essential scripts or content that won't impact the initial page load.
Considering the significance of webpage performance, it is recommended to choose the most appropriate injection point based on its importance and relevance to the overall webpage functionality.
Custom scripts
Custom Scripts can be used to inject external JavaScript files into the <head> and <body> sections of an HTML document. The actual data to be injected into the template will be provided at runtime, resulting in a complete HTML document with the necessary scripts included.
The async and defer attributes can be used to control how the JavaScript files are loaded, which can affect the performance of the webpage.
Requirements
Paste the script URL into the form field provided. Double-check for any typos or errors in the URL to ensure smooth execution. The URL should point directly to the script file hosted on a server or a Content Delivery Network (CDN).
Async: When you toggle the
asyncattribute on, the browser will load the script asynchronously, which means that it can start loading other resources while the file is still being downloaded. This can improve the performance of the webpage by preventing the browser from being blocked while the script is loading.Defer: When you toggle the
deferattribute on, the browser will load the script deferred, which means that it will not be executed until all other resources have been loaded. This can be useful for scripts that need to access the DOM, as it ensures that the DOM is fully loaded before the script is executed.
In general, the async attribute is a good choice for scripts that do not need to access the DOM, while the defer attribute is a good choice for scripts that do need to access the DOM.
Favicon
A favicon is a petite icon that represents a website, web page, or web application. It is prominently displayed in browser tabs and the bookmarks bar, providing users with a visual reference for the site.
Beyond its visual appeal, the favicon plays a role in enhancing search engine optimization (SEO) indirectly, contributing to improved visibility in search results. Moreover, it serves as a vital tool for building brand recognition and instilling trust among users, as the familiar icon becomes synonymous with your brand's identity.
Requirements
Sizes: The "sizes" property specifies the dimensions of the icon and its aspect ratio, which helps devices choose the most appropriate icon size.
Relationship: The "rel" property typically specifies the relationship between the current document and the linked resource. For icon links, "rel" is often set to "icon," "shortcut icon," "apple-touch-icon," or similar values, depending on the type of icon being used.
URL: The "URL" property contains the URL or path to the actual icon file.
Best practice for Favicons
If you encounter difficulties adding your favicons using the current settings, don't worry. Follow these steps to easily upload your favicon:
Go to your hosting settings page in Vev. You can access it by clicking on your username in the bottom left corner, then selecting "Hosting," and finally searching for and choosing your hosting option.
On the Hosting Settings page, scroll down to the Favicon section.
Simply upload your favicon using the provided option.
Once uploaded, the form fields will be automatically generated with the new favicon, ensuring smooth integration.
Automatically set values once uploading from Hosting Settings:
Mobile Browser Color
By using this integration, you can customize the appearance of the browser interface on different platforms to match the theme of your website or web application. This can create a more cohesive and visually appealing experience for users across various devices. Only applicable for iOS Safari and Android.
Requirements
"#RRGGBB": A 6-digit hexadecimal representation of the RGB color, where RR is the red component, GG is the green component, and BB is the blue component. For example, "#FF0000" represents red, "#00FF00" represents green, and "#0000FF" represents blue.
"#RGB": A 3-digit hexadecimal representation of the RGB color, where R, G, and B represent the red, green, and blue components, respectively. For example, "#F00" represents red, "#0F0" represents green, and "#00F" represents blue.
"color_name": Instead of using hexadecimal values, some browsers also recognize color names, such as "red," "green," "blue," "white," "black," and more.
Password Protect
Use the Password Protect Integration to conceal your content behind a password entry dialog.
Note: Password Protect is only available for your custom domains and cant be used for vev.site domains.
Your users would be prompted to enter the password to access your page:
To customize the password-entering page 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>
Note: 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.