Default Cvent Button

<script type="text/javascript" src="https://www.cvent.com/wlrfps/js/widget/"></script>
<script type="text/javascript" charset="utf-8">
  const options = {};
  options.display = "window";
  options.key ='a0c9d507-7bad-4979-9e89-8484f52f075f';
  options.uid = '9145c8ec-7577-4658-8ee4-3180ec9a0b38';
  var wlrfp_widget = new wlrfp.widget(options);
</script>

solid blue button

Default Cvent Secondary Button

<script type="text/javascript" src="https://www.cvent.com/wlrfps/js/widget/"></script>
<script type="text/javascript" charset="utf-8">
  const options = {};
  options.display = "window";
  options.key ='a0c9d507-7bad-4979-9e89-8484f52f075f';
  options.uid = '9145c8ec-7577-4658-8ee4-3180ec9a0b38';
  options.button_theme = {
    type: 'secondary'
  }
  var wlrfp_widget = new wlrfp.widget(options);
</script>

outline of a button

Customised Button

<script type="text/javascript" src="https://www.cvent.com/wlrfps/js/widget/"></script>
<script type="text/javascript" charset="utf-8">
  const options = {};
  options.display = "window";
  options.key ='a0c9d507-7bad-4979-9e89-8484f52f075f';
  options.uid = '9145c8ec-7577-4658-8ee4-3180ec9a0b38';
  options.button_theme = {
    type: 'custom',
    font: {
      fontFamily: 'sassyfrass',
      src: "url(https://fonts.gstatic.com/s/sassyfrass/v5/LhWhMVrGOe0FLb97BjhsE-9aEtSygOan.woff2) format(woff2)",
      color: 'yellow'
    },
    background: {
      color: 'purple',
      border: 'black'
    }
  }
  var wlrfp_widget = new wlrfp.widget(options);
</script>

button following website colors

Inline Implementation

<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'
  var wlrfp_widget = new wlrfp.widget(options);
</script>

inline iframe

Overlay Implementation

<script type="text/javascript" src="https://www.cvent.com/wlrfps/js/widget/"></script>
<script type="text/javascript" charset="utf-8">
  const options = {};
  options.display = "overlay_mode";
  options.key ='a0c9d507-7bad-4979-9e89-8484f52f075f';
  options.uid = '9145c8ec-7577-4658-8ee4-3180ec9a0b38';
  var wlrfp_widget = new wlrfp.widget(options);
</script>

overlay mode implementation

Checkbox Implementation

<form id="hotelpicker">
  <input type="checkbox" name="hotels" value="262b3fa1-63c0-4ed3-bcb8-e4dc8178550a" />XX94N - A Demo Gold Resort <br />
  <input type="checkbox" name="hotels" value="9632b4f5-ec24-4e44-8291-25355cf2e9f8" />JB811 - A Demo Property <br />
  <input type="checkbox" name="hotels" value="9b59cd5f-4dc2-464d-ae96-89401cff0eaf" />TXS38 - A Demo Resort <br />
</form>


<script type="text/javascript" src="https://www.cvent.com/wlrfps/js/widget/"></script>
<script type="text/javascript" charset="utf-8">

  function getHotelUids() {
    var uids = "";
    var form = document.getElementById("hotelpicker");
    for (i = 0; i < form.hotels.length; i++) {
      if (form.hotels[i].checked) {
        if (!form.hotels[i].value) continue; // skip blank uids
        uids = uids
          ? uids + "," + form.hotels[i].value
          : form.hotels[i].value;
      }
    }
    return uids;
  }

  const options = {};
  options.display = "window";
  options.key ='a0c9d507-7bad-4979-9e89-8484f52f075f';
  options.populateUid = 'getHotelUids';
  var wlrfp_widget = new wlrfp.widget(options);
</script>

checkbox

Multi-Select Implementation

<form>
  <select id="hotelpicker" multiple size="5">
    <option value="" selected>Please choose one or more hotels</option>
    <option value="262b3fa1-63c0-4ed3-bcb8-e4dc8178550a">XX94N - A Demo Gold Resort</option>
    <option value="9632b4f5-ec24-4e44-8291-25355cf2e9f8">JB811 - A Demo Property</option>
    <option value="9b59cd5f-4dc2-464d-ae96-89401cff0eaf">TXS38 - A Demo Resort</option>
  </select>
</form>

<script type="text/javascript" src="https://www.cvent.com/wlrfps/js/widget/"></script>
<script type="text/javascript" charset="utf-8">

  function getHotelUids() {
    var uids = "";
    var hotels = document.getElementById("hotelpicker");
    for ( i=0; i<hotels.options.length; i++ ) {
      if ( hotels.options[i].selected ) {
        if ( !hotels.options[i].value ) continue;
        uids = ( uids ) ? uids + "," + hotels.options[i].value : hotels.options[i].value;
      }
    }
    return uids;
  }

  const options = {};
  options.display = "window";
  options.key ='a0c9d507-7bad-4979-9e89-8484f52f075f';
  options.populateUid = 'getHotelUids';
  var wlrfp_widget = new wlrfp.widget(options);
</script>

multi-select box

External Button Implementation

<button onclick='wlrfp_widget.show()'>This is external button, style as you want</button>

<script type="text/javascript" src="https://www.cvent.com/wlrfps/js/widget/"></script>
<script type="text/javascript" charset="utf-8">
  const options = {};
  options.button = "none";
  options.key ='a0c9d507-7bad-4979-9e89-8484f52f075f';
  options.uid = '9145c8ec-7577-4658-8ee4-3180ec9a0b38';
  var wlrfp_widget = new wlrfp.widget(options);
</script>

external-button

Last updated on