Below are the technical specifications to provide for theming, which can be implemented by your Cvent representative.
Logo
The logo appears in the header of the RFP form and on customer emails. Custom logo’s should be:
- 250 pixels wide and 50-80 pixels high. Recommended dimensions: 178 pixels by 30 pixels.
- Supported file types: PNG, SVG, JPEG, GIF
To set up the logo, reach out to your Cvent representative with the logo, and they will assist you.
Color/Font
Two options are available for configuring the primary color of the App and the font.
Option 1: Embed Code
Option 1 is to set it up in the embed code of the App. This would allow you to have more control on the theme for each page but would require a code change for each of the website for enabling it and any further updates.
| App Theming Option | Description | | :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | options.font | This is the name of the font family to use for the Whitelabel RFP form. If you’d like to use a non-standard font, supply a URL for the font in the options.fontUrl option. | “Helvetica” | | options.fontUrl | This is a string used to instruct the browser where to find a font file. If specified, this must be a valid src descriptor value for a CSS @font-face rule. See more on @font-face’s. | “url(https://fonts.gstatic.com/s/carroisgothic/v8/Z9XPDmFATg-N1PLtLOOxvIHl9amE1C_4jtJ_.woff2) format(‘woff2’)” | | options.primaryColor | This is a CSS valid color that will represent your brand color on the Whitelabel RFP form. | “#97999B” |
Examples
Below are the example of embed code with App theming.
Primary Color Only
<script type="text/javascript" src="https://www.cvent.com/wlrfps/js/widget/"></script>
<script type="text/javascript" charset="utf-8">
const options = {};
options.display = "inline";
options.key ='a0c9d507-7bad-4979-9e89-8484f52f075f';
options.uid = '9145c8ec-7577-4658-8ee4-3180ec9a0b38';
options.height = "800px";
options.primaryColor = "#008000";
var wlrfp_widget = new wlrfp.widget(options);
</script>
Font Only
<script type="text/javascript" src="https://www.cvent.com/wlrfps/js/widget/"></script>
<script type="text/javascript" charset="utf-8">
const options = {};
options.display = "inline";
options.key ='a0c9d507-7bad-4979-9e89-8484f52f075f';
options.uid = '9145c8ec-7577-4658-8ee4-3180ec9a0b38';
options.height = "800px";
options.font = "monospace";
var wlrfp_widget = new wlrfp.widget(options);
</script>
All Theming Options
<script type="text/javascript" src="https://www.cvent.com/wlrfps/js/widget/"></script>
<script type="text/javascript" charset="utf-8">
const options = {};
options.display = "inline";
options.key ='a0c9d507-7bad-4979-9e89-8484f52f075f';
options.uid = '9145c8ec-7577-4658-8ee4-3180ec9a0b38';
options.height = "800px";
options.font = "sassyfrass";
options.fontUrl = "url(https://fonts.gstatic.com/s/sassyfrass/v5/LhWhMVrGOe0FLb97BjhsE-9aEtSygOan.woff2) format(woff2)";
options.primaryColor = "purple"
var wlrfp_widget = new wlrfp.widget(options);
</script>
Option 2: Cvent Implementation
Option 2 would be to share the primary color and/or font/font URL with your Cvent representative. They can apply it for a group of your hotels based on how they are set up in Cvent. This will allow faster setup of Theming and also help in faster updates when there are any changes.
If your implementation plan includes Venue Search, you will notice a theme object to add your own fonts and colors to your white label experience. Adding a theme to search will also automatically add your theme to the RFP form without needing to go through the development team. Updating the logo to the RFP form and emails always has to go through the above spec process.