Thanks for being patient while we implement your feedback to improve the developer experience.
API Docs
Management APIs
Widgets
Code Samples

Widgets Code Samples

Below are widget code samples for developers to use as a starting point.

List

Template

<ul>
    {{#each list_items}}
    <li style="color:{{color}};">{{text}}</li>
    {{/each}}
</ul>

JSON encoded template

<ul>\r\n{{#each list_items}}\r\n <li style=\"color:{{color}};\">{{text}}<\/li>\r\n{{\/each}}\r\n<\/ul>

Configuration

{
  "name": "Simple List Test",
  "widget_configuration": {
    "list_items": [
      {
        "color": "blue",
        "text": "The color is blue"
      },
      {
        "color": "green",
        "text": "The color is green"
      },
      {
        "color": "red",
        "text": "The color is red"
      }
    ]
  },
  "widget_template_uuid": "your-template-uuid"
}

List

HTML

Template

{{{html}}}

Configuration

{
  "name": "Simple List Test",
  "widget_configuration": {
    "html": "#  This widget will accept any HTML "
  },
  "widget_template_uuid": "your-template-uuid"
}

HTML

Text with styling

Template

<style>#bc-simple-text-{{_.id}} {color: {{color}};background: {{background_color}};font-size: {{font_size}};font-style: {{font_style}};font-weight: {{font_weight}};font-family: {{font_family}};text-align: {{text_align}};margin-top: {{margin_top}};margin-bottom: {{margin_bottom}};margin-left: {{margin_left}};margin-right: {{margin_right}};padding-top: {{padding_top}};padding-bottom: {{padding_bottom}};padding-left: {{padding_left}};padding-right: {{padding_right}};}</style><p id='bc-simple-text-{{_.id}}'>{{text}}</p>

JSON encoded template

<style>#bc-simple-text-{{_.id}} {color: {{color}};background: {{background_color}};font-size: {{font_size}};font-style: {{font_style}};font-weight: {{font_weight}};font-family: {{font_family}};text-align: {{text_align}};margin-top: {{margin_top}};margin-bottom: {{margin_bottom}};margin-left: {{margin_left}};margin-right: {{margin_right}};padding-top: {{padding_top}};padding-bottom: {{padding_bottom}};padding-left: {{padding_left}};padding-right: {{padding_right}};}<\/style><p id='bc-simple-text-{{_.id}}'>{{text}}<\/p>

Configuration

{
  "name": "Simple Text with Styling",
  "widget_configuration": {
    "text": "Simple Text with Styling",
    "_.id": "1",
    "color": "white",
    "background_color": "#3C1F8C",
    "font_size": "45px",
    "font_weight": "bold",
    "font_family": "'Palatino Linotype', 'Book Antiqua', Palatino, serif",
    "text_align": "center",
    "margin_right": "50px",
    "margin_left": "50px",
    "padding_top": "25px",
    "padding_bottom": "25px"
  },
  "widget_template_uuid": "your-template-uuid"
}

Text With Styling

Image slider

Template

<ul class="slider">{{#each slides}}<ul class="slide"><img class="mySlides" src="{{image}}"/></ul>{{/each}}</ul><script>var slideIndex=0;carousel();function carousel(){var i;var x=document.getElementsByClassName("mySlides");for (i=0; i < x.length; i++){x[i].style.display="none";}slideIndex++;if (slideIndex > x.length){slideIndex=1}x[slideIndex-1].style.display="block"; setTimeout(carousel, 4000); // Change image every 4 seconds}</script>

JSON encoded template

<ul class=\\\"slider\\\">\\n{{#each slides}}\\n<ul class=\\\"slide\\\"><img class=\\\"mySlides\\\" src=\\\"{{image}}\\\"\/><\/ul>\\n{{\/each}}\\n<\/ul>\\n<script>\\nvar slideIndex = 0;\\ncarousel();\\nfunction carousel() {\\nvar i;\\nvar x = document.getElementsByClassName(\\\"mySlides\\\");\\nfor (i = 0; i < x.length; i++) {\\nx[i].style.display = \\\"none\\\"; \\n}\\nslideIndex++;\\nif (slideIndex > x.length) {slideIndex = 1} \\nx[slideIndex-1].style.display = \\\"block\\\"; \\nsetTimeout(carousel, 4000); \/\/ Change image every 4 seconds\\n}\\n<\/script>

Configuration

{
  "name": "Home Page Slider",
  "widget_configuration": {
    "slides": [
      {
        "image": "https://upload.wikimedia.org/wikipedia/commons/3/3f/Puppy_French_Bulldog.jpg"
      },
      {
        "image": "https://upload.wikimedia.org/wikipedia/commons/c/c1/2009-04-21_APBT_pup_on_deck.jpg"
      },
      {
        "image": "https://upload.wikimedia.org/wikipedia/commons/e/e7/Beagle_puppy_Cadet.jpg"
      }
    ]
  },
  "widget_template_uuid": "your-widget-id"
}

Image Slider

Button

Template

<style>.sd-button-{{_.id}}{display:flex;align-items:center;{{#if alignment.horizontal '===' 'center'}}justify-content: center;{{else if alignment.horizontal '===' 'left'}}justify-content: flex-start;{{else if alignment.horizontal '===' 'right'}}justify-content: flex-end;{{/if}}}.sd-button-{{_.id}}a{color:{{textColor}};font-size:{{textSize.value}}{{textSize.type}};font-family:{{fontFamily}};font-weight:{{fontWeight}};padding-top:{{buttonPadding.top.value}}{{buttonPadding.top.type}};padding-right:{{buttonPadding.right.value}}{{buttonPadding.right.type}};padding-bottom:{{buttonPadding.bottom.value}}{{buttonPadding.bottom.type}};padding-left:{{buttonPadding.left.value}}{{buttonPadding.left.type}};margin-top:{{buttonMargin.top.value}}{{buttonMargin.top.type}};margin-right:{{buttonMargin.right.value}}{{buttonMargin.right.type}};margin-bottom:{{buttonMargin.bottom.value}}{{buttonMargin.bottom.type}};margin-left:{{buttonMargin.left.value}}{{buttonMargin.left.type}};text-align:center;text-decoration:none}.sd-button-{{_.id}}a{background-color:{{backgroundColor}};border:{{buttonBorder}}px solid{{borderColor}};border-radius:{{borderRadius}}px}.sd-button-{{_.id}}a:hover{background-color:{{backgroundColorHover}};border-color:{{borderColorHover}};color:{{textColorHover}}}@media only screen and (max-width: 700px){.sd-button-{{_.id}}{}}</style><div class="sd-button-widget sd-button-{{_.id}}"> <a href="{{buttonLink}}" role="button">{{buttonText}}</a></div>

JSON encoded template

<style>.sd-button-{{_.id}}{display:flex;align-items:center;{{#if alignment.horizontal '===' 'center'}}justify-content: center;{{else if alignment.horizontal '===' 'left'}}justify-content: flex-start;{{else if alignment.horizontal '===' 'right'}}justify-content: flex-end;{{\/if}}}.sd-button-{{_.id}}a{color:{{textColor}};font-size:{{textSize.value}}{{textSize.type}};font-family:{{fontFamily}};font-weight:{{fontWeight}};padding-top:{{buttonPadding.top.value}}{{buttonPadding.top.type}};padding-right:{{buttonPadding.right.value}}{{buttonPadding.right.type}};padding-bottom:{{buttonPadding.bottom.value}}{{buttonPadding.bottom.type}};padding-left:{{buttonPadding.left.value}}{{buttonPadding.left.type}};margin-top:{{buttonMargin.top.value}}{{buttonMargin.top.type}};margin-right:{{buttonMargin.right.value}}{{buttonMargin.right.type}};margin-bottom:{{buttonMargin.bottom.value}}{{buttonMargin.bottom.type}};margin-left:{{buttonMargin.left.value}}{{buttonMargin.left.type}};text-align:center;text-decoration:none}.sd-button-{{_.id}}a{background-color:{{backgroundColor}};border:{{buttonBorder}}px solid{{borderColor}};border-radius:{{borderRadius}}px}.sd-button-{{_.id}}a:hover{background-color:{{backgroundColorHover}};border-color:{{borderColorHover}};color:{{textColorHover}}}@media only screen and (max-width: 700px){.sd-button-{{_.id}}{}}<\/style><div class=\"sd-button-widget sd-button-{{_.id}}\"> <a href=\"{{buttonLink}}\" role=\"button\">{{buttonText}}<\/a><\/div>
 

Configuration

{
  "name": "Button",
  "widget_configuration": {
    "buttonText": "Button label",
    "alignment": {
      "horizontal": "center"
    },
    "buttonMargin": {
      "top": {
        "value": "0",
        "type": "px"
      },
      "right": {
        "value": "0",
        "type": "px"
      },
      "bottom": {
        "value": "0",
        "type": "px"
      },
      "left": {
        "value": "0",
        "type": "px"
      }
    },
    "buttonPadding": {
      "top": {
        "value": "8",
        "type": "px"
      },
      "right": {
        "value": "24",
        "type": "px"
      },
      "bottom": {
        "value": "8",
        "type": "px"
      },
      "left": {
        "value": "24",
        "type": "px"
      }
    },
    "fontFamily": "inherit",
    "fontWeight": "400",
    "textSize": {
      "value": 21,
      "type": "px"
    },
    "textColor": "#FFFFFF",
    "textColorHover": "#FFFFFF",
    "backgroundColor": "#444444",
    "backgroundColorHover": "#666666",
    "borderColor": "#444444",
    "borderColorHover": "#666666",
    "buttonBorder": 1,
    "borderRadius": 4
  },
  "widget_template_uuid": "your-template-uuid"
}

Button

Related resources

Articles

Endpoints