---
title: "v0.3.11 - Circular SG Help Widget settings [Sidebar]"
description: "Module script"
canonical_url: "https://devtesting.brainfi.sh/articles/v0311-circular-sg-help-widget-settings-sidebar-8t2WpWvRJ9"
md_url: "https://devtesting.brainfi.sh/articles/v0311-circular-sg-help-widget-settings-sidebar-8t2WpWvRJ9.md"
---
# Module script

```markup
<script type="module">
  import Brainfish from "https://cdn.jsdelivr.net/npm/@brainfish-ai/search-widget@0.3.11/dist/web.js";

  Brainfish.HelpWidget.initPopup({
    widgetMode: "slide-over",
    apiKey: "bf_search_widget_Ser3xCe3rwMzm3f2DUCtIR4WZJagFzQwDxK9G2",
            disableModalBackdrop: true,
        autoFocus: true,
    language: 'en', // the language the search supports
    class: '', // custom css class for your own use
    defaultOpen: false,
    // the rest are optional
    theme: {
          inputButtonBgColor: "#ea2f5d",
          inputButtonColor: "#ea2f5d",
          inputBorderColor: "#000",
      textBaseColor: '#333333' // text color for the widget
      
    },
    settings: {
      suggestionsTitle: 'Suggested questions:',
      logo: {
        monotone: true,
        smaller: true,
      },
      suggestions: ["Am I eligible for subscription?", "My order is approved, when is the delivery?", "My order is declined, will I get refunded?", "Can someone else accept delivery on behalf?", "Can I buy my subscribed device?"],
      hideFeedback: false,
      showDisclaimer: false,
      disclaimer: 'Disclaimer text',
      placeholder: 'Ask a question here...',
      limit: 5,
      linkExternalUrl: false,
      nextBestActions: [
        {
          label: 'Contact Us',
          type: 'link',
          value: 'mailto:help_sg@nowcircular.com',
          icon: 'Mail',
        }
      ],
      bodyActionButtons: [
                {
              label: "Check my spending power",
              value: "mailto:help_sg@nowcircular.com?subject=Spending%20Power%20Review&body=Hi%20team%2C%0D%0A%0D%0AI'd%20like%20to%20check%20my%20current%20Spending%20Power.%0D%0A%0D%0AThanks.%0D%0A%0D%0A---%0D%0A%0D%0ANotes%20from%20Circular%3A%0D%0A%0D%0A-You%20will%20only%20be%20assigned%20a%20Spending%20Power%20once%20you%20have%20placed%20your%20first%20subscription%20order%20with%20us%0D%0A-If%20you%20have%20an%20existing%20subscription%20with%204-6%20on%20time%20payments%2C%20you%20may%20request%20for%20a%20review%20by%20attaching%203%20months%20of%20your%20most%20recent%20financial%20documents%20in%20this%20email.",
              type: "link",
              icon: "BatteryHigh"
            },
                                 {
              label: "Change recurring billing date",
              value: "mailto:help_sg@nowcircular.com?subject=Change%20My%20Payment%20Due%20Date&body=Hi%20team%2C%0D%0A%0D%0AI'd%20like%20to%20change%20my%20monthly%20billing%20date.%20New%20date%3A%20%0D%0A%0D%0AI%20understand%20that%20changing%20my%20monthly%20due%20date%20will%20incur%20a%20one-time%20pro-rated%20charge%20to%20cover%20the%20unpaid%20period%20between%20the%20payment%20dates%2C%20billed%20alongside%20the%20new%20billing%20date%E2%80%99s%20invoice.%0D%0A%0D%0AThanks.%0D%0A%0D%0A---%0D%0A%0D%0AExample%20from%20Circular%3A%0D%0A%0D%0ACurrent%20due%20date%3A%20%2490%20at%205th%20monthly%0D%0ALast%20bill%20paid%3A%20Oct%205th%20(for%20the%20period%20of%20Oct%205%20%E2%80%93%20Nov%204)%0D%0ANew%20due%20date%3A%2015th%20monthly%0D%0A%0D%0AOne-time%20pro-rated%20charge%20would%20be%20approximately%20%2430%20to%20cover%20the%20unpaid%20period%20between%20Nov%205%20%E2%80%93%20Nov%2014%2C%20billed%20alongside%20Nov%2015%E2%80%99s%20%2490%20bill.",
              type: "link",
              icon: "Calendar"
            },
                                 {
              label: "Renew my subscription (last month)",
              value: "mailto:help_sg@nowcircular.com?subject=Renew%20My%20Subscription%20That%E2%80%99s%20Ending%20Soon&body=Hi%20team%2C%0D%0AI'd%20like%20to%20renew%20my%20subscription%20that%20is%20currently%20in%20the%20last%20month.%0D%0AThanks.",
              type: "link",
              icon: "Repeat"
            },
                {
              label: "Submit repair request",
              value: "https://tinyurl.com/circular-sg-repair",
              type: "link",
              icon: "Wrench"
            }
      ],
      footerActionButtons: [
        {
              label: "Contact us",
              value: "mailto:help_sg@nowcircular.com",
              type: "link",
              icon: "Phone"
            }
      ],
      panelTitle: 'Help SG',
      regions: ['SG']
    }
  });
</script>
<script src="https://unpkg.com/@phosphor-icons/web" async></script>
<style>
  .brainfish-trigger-button {
  	position:fixed;
    border-radius: 24px 4px 16px 24px;
    height: 32px !important;
    padding: 0 10px;
    width: unset !important;
	bottom:40px;
	right:40px;
	background-color:#501ec4 !important;
	color:#FFF;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
    cursor: pointer;
    z-index: 9995;
    border: none;
    display: flex;
    align-items: center;
  }
  .ph {
    font-size: 18px;
    margin-right: 5px;
  }
</style>
```

## Trigger implementation

```markup
<button 
   class="brainfish-trigger-button" 
   onClick="Brainfish.HelpWidget.open('brainfish-trigger-button')"><i class="ph ph-question"></i>Help</button>
```

## Preview

[https://codepen.io/DK-Brainfish/pen/JjxJvEm](https://codepen.io/DK-Brainfish/pen/JjxJvEm?blk=true)

\