Widget API Deployment
After your implementation kick-off, your Cvent representative will provide you with HTML-specific code for your website. You can use this code on one website domain, and the code can be deployed once to each page on your website.
Cvent recommends using HTTPS to secure user data better. The RFP Form will always communicate exclusively with Cvent servers over HTTPS, and we recommend that you implement your sites using HTTPS for even better protection.
By default, RFP forms include fields to collect first and last name, email, phone, organization, city, and country. Your representative can also help you add form fields for:
By default, RFP forms include fields to collect first and last name, email, phone, organization, city, and country. Your representative can also help you add form fields for:
- Address 1
- Address 2
- State
- Third-party planner and Global Service Operations
By default, the form can accept all three form types, but your Cvent representative can configure your form only to accept the RFP types you wish to deploy on your site:
- Meeting
- Wedding
- Special Event
To support any General Data Protection Regulations (GDPR) you may need to follow, your Cvent representative can help you configure your form with the following:
- A cookie banner
- Required and/or optional consent language to agree to
- Your terms of service hyperlink
Lastly, we’ll provide property IDs. These unique IDs are CSN UUID and external ID (we also support SpeedRFP property ID for WhiteLabel RFP clients) and that identify the property the RFP is submitted to. Enterprise customers can have more than one UID. In that case, each UID should be in the same string, comma-delimited.
Sample Code
The following is an example code of the Widget API deployment.
<!-- Provide an empty container as the content will be overwritten by the widget -->
<div id="wlrfp-container"></div>
<script src="https://www.cvent.com/wlrfps/js/widget/"></script>
<script>
var options = {
display: "window",
container: "wlrfp-container", // It is recommended to provide the id of the
// container where the whitelabel RFP widget needs
// to be displayed, otherwise widget can have unexpected
// behaviour. Provide different container IDs for different
// widgets on the same page.
id: "widget-identifier", // It is recommended to provide the id property if you plan to
// have more than one widgets on the same page, otherwise widget
// can have unexpected behaviour.
key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
uid: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
};
var wlrfp_widget = new wlrfp.widget(options);
</script>
- Where options.key identifies your form. Example: 01e90d6e-730f-4f4e-a7c6-2bm733ba8550
- Where options.uid identifies your venue. Example: 3HR0G, d67d3a48-852b-4bc7c-bb8w-4od7dfcd5ca7, 51953
Display Options
You can customize the sample code provided based on the query parameter options you use below. First, decide on how you wish to display the form on your site:
Embed
options.display =”inline”
This option places the WhiteLabel RFP web form into your actual webpage as if it were part of the page. If 3rd-party cookies are blocked, the overlay wont’t work and we show a button instead.
Overlay_mode
options.display =”overlay_mode”
This option places the WhiteLabel RFP web form onto your actual webpage, as if it were part of the page. If third-party cookies are blocked, the overlay doesn’t work and a button is shown instead, which takes the user to new window mode upon click. The overlay mode is not supported in mobile view. It opens a new window in case the mobile view of overlay mode is present.
Overlay (Deprecated)
The display type used for overlay mode of WL was ‘overlay,’ but now that has been replaced with ‘overlay mode,’ and the user will be redirected to the new window mode for the display type ‘overlay mode.‘
New Window
options.display =”window”
This option shows a WhiteLabel RFP button that, when clicked, opens the WhiteLabel RFP web form in a new tab.
When a user is on a mobile device, the widget will always deploy as a new window, regardless of your implementation choice. Opening a new window when a mobile device is detected and is assumed to be the best user experience for your visitors.
If choosing the new window option, you may decide to customize the look and feel of the White Label RFP button that opens the form. Use the following JavaScript code snippet right before “var wlrfp_widget = new wlrfp.widget(options);” in the WhiteLabel RFP widget:
Parameter | Notes |
---|---|
options.button = “custom” | This tells the form to use the custom button option. This is a string. |
options.button_style = | This is a string. CSS style attributes applied to the WhiteLabel RFP button. This is only used if the options.button = “custom” |
options.button_text = “Provide Your Text Here”; | What do you want your button to say? Provide text like “Submit a Meeting RFP.” This is a string. CSS style attributes applied to the WhiteLabel RFP custom button text. This is only used if the option.button=“custom”. |
options.button_text_style = “text-decoration:underline; padding: 2px;“ | How you can customize the style of the button. CSS style attributes applied to the WhiteLabel RFP custom button text. This is only used if the option.button=“custom”. |
options.buttontheme = { type: ‘primary’, // ‘primary’ || ‘secondary’ || ‘custom’ font: { fontFamily: ‘Carrois Gothic’, src: ‘url(https://fonts.gstatic.com/s/carroisgothic/v8/Z9XPDmFATg-N1PLtLOOxvIHl9amE1C_4jtJ.woff2) format(‘woff2’)’, color: ‘#3F4444’ }, background: { color: ‘#97999B’, border: ‘#3F4444’ } } | See the options.button_theme section for more details on this parameter. |
options.button_theme
This section describes the settings for the option.button_theme
parameter in more detail.
Example:
options.button_theme = {
type: 'primary', // 'primary' || 'secondary' || 'custom'
font: {
fontFamily: 'Carrois Gothic',
src:
'url(https://fonts.gstatic.com/s/carroisgothic/v8/Z9XPDmFATg-N1PLtLOOxvIHl9amE1C_4jtJ_.woff2) format(\'woff2\')',
color: '#3F4444'
},
background: {
color: '#97999B',
border: '#3F4444'
}
}
Type
options.button_theme.type
has three valid values:
- Primary: Filled button, font and background properties are ignored.
- Secondary: Button is outlined, font and background properties are ignored.
- Custom: Font and background properties are applied.
Example: button_theme.type = 'primary'
Font
options.button_theme.font
contains the parameters for determining the font to use on the button.
These parameters are described in more detail in later sections.
Example:
button_theme.font = {
fontFamily: 'Carrois Gothic',
src: 'url(https://fonts.gstatic.com/s/carroisgothic/v8/Z9XPDmFATg-N1PLtLOOxvIHl9amE1C_4jtJ_.woff2) format(\'woff2\')',
color: '#3F4444'
}
Font Family
button_theme.font.fontFamily
represents the name of the font family to be used for
the WhiteLabel RFP button. See more on font families.
Example: font-family: "Gill Sans", sans-serif
SRC
button_theme.font.src
represents the src CSS descriptor for the
@font-face at-rule specifies
the resource containing font data. It is required for the @font-face rule to be valid.
See more on @font-face src.
Example: url(path/to/font.woff) format("woff")
Color
button_theme.font.color
represents the color of the font. Accepts all valid CSS color values.
See more on color.
Example:
rgb(34, 12, 64, 0.6)
hsl(30, 100%, 50%, 0.6)
#009900
rebeccapurple
Background
button_theme.background
represents the background specifications of the button.
Example:
background: {
color: '#006DE9',
border: 'none'
}
Background Color
button_theme.background.color
represents the background color of the White Label RFP button.
Accepts all valid CSS color values. See more on color.
Example:
rgb(34, 12, 64, 0.6)
hsl(30, 100%, 50%, 0.6)
#009900
rebeccapurple
Background Border
button_theme.background.border
represents the border color of the White Label RFP button.
Accepts all valid CSS color values. See more on color.
Example:
rgb(34, 12, 64, 0.6)
hsl(30, 100%, 50%, 0.6)
#009900
rebeccapurple
Other Optional Parameters
This section describes other optional parameters you can provide.
WhiteLabel RFP_widget class
Method | Return Value | Notes |
---|---|---|
show() | “null” | Opens the WhiteLabel RFP widget if options.display=“overlay_mode” or options.display= “window”. This method can be used to open the WhiteLabel RFP widget when options.button = “none”. Example: |
setRfpType() | “null” | Sets the type of RFP you want to receive. Can be “meeting”, “wedding” or “special event”. Any other value will clear this setting. This overrides anything set with options.rfp_type. |
setUid() | “null” | Sets the hotel UIDs that are loaded into the WhiteLabel RFP web form when it is opened. Can by used to dynamically change what hotels are in the WhiteLabel RFP. |
Other RFP_widget.options parameters
This section describes additional WhiteLabel RFP_widget.options
parameters you can use during deployment.
Property | Value | Notes |
---|---|---|
options.container | string | The ID if an element in the web pages’s DOM that the WhiteLabel RFP web form is placed into. If display=“window”, then the WhiteLabel RFP button appears here. If display=“inline”, then the web form appears here. If container is not used, then the button or web form appears where the javascript code block is. It is recommended to provide the container otherwise there can be unexpected behaviour. |
options.height | String Controls the height of an inline instance of WhiteLabel RFP, in pixels. This default to 600px, but to prevent double scroll bars we recommend setting this to 900px. For example: options.height = “1000px” | |
options.populateUid | String “getHotelUids” The name of a function to run before WhiteLabel RFP is loaded. That function should return a string of comma delimited list of UIDs. For WhiteLabel Enterprise users, this allows prepopulation of hotel(s) into WhiteLabel RFP and supports sending an RFP to multiple hotels. | |
options.rfp_type | ”meeting” “wedding” or “special event” Forms may collect any combination of meeting, wedding, and special event RFPs. By default the user can select the type of RFP they want to create. But you can force an RFP type by using “meeting”, “wedding”, or “special event”. This is helpful if you have one form that accepts multiple RFP types, but you want to accept different types on different pages on your site. For instance, you may have a “Wedding” page and only want to accept wedding RFPs from it. | |
locale | string | Check your contract for multi-locale support. The locale that the widget should be displayed in. If this locale is not valid/supported, the default locale of the form will be used. If that locale is not valid/supported, the default locale for the form will be used. Supported Locales: de-DE, en-US, es-ES, fi-FI, fr-CA, fr-FR, it-IT, ja-JP, ko-KR, nl-NL, pt-BR, ru-RU, sv-SE, th-TH, tr-TR, zh-Hans, zh-Hant |
When implementing your code, be careful of the order in which values are loaded. If you implement the code where it executes prior to the iframe or div tag being added to the DOM, you will likely see JavaScript errors in the console. Be sure to double-check the console frequently so you can identify these issues more quickly.