Termination Service Widget

Installation

Installation is easy, just add our loader script to the head of your page. The loader script fetches the latest version of the widget.

<script src="//widget.greenonline.nl/termination-service-widget-loader.min.js"></script>

Add the following lines of code to you page to initialize the widget:

<script>loadTerminationServiceWidget(function(TerminationServiceWidget){
    widget = new TerminationServiceWidget('#termination-service-widget');
  }, {
    api_key: 'your-api-key',
    host: 'https://www.opzeggen.nl', //make sure to use the correct host for other territories 
  })
</script>

<div id="termination-service-widget"></div>

For an example, checkout our widget example.

Authentication

To load the right version of the widget and to send requests to the cancellation web service, an valid authentication token (api_key) is required. Make sure to set the api_key option in the loadTerminationServiceWidget function as shown in the example above.

Sandbox mode

To load the widget for testing purposes, the widget can be initialized with the sandbox option. This will make sure no real cancellations will be send to organisations and cancellations won't be charged to you. The widget will show a message (see example) to indicate that the widget is in test mode and no cancellations will be submitted.

Please contact us if you want to enable (or disable) sandbox mode for the widget.

Styling

The Termination Service Widget comes with a basic stylesheet to add styling to the input fields, headers and preview. All our html is wrapped inside a div with class .termination-service-widget except for the datepicker which lives in it's own termination-service-widget-datepicker class. If you want to adjust anything in our layout, just overwrite it with your own custom css files.

The default stylesheet will be added automatically by the widget-loader but can be skipped if you want to add your own stylesheet, see loadTerminationServiceWidget documention below.

Default layout

The layout of the elements in the Termination Service Widget is not styled by default. This means that the letter preview is rendered beneath the form elements. In our example page the div's with form elements and preview are floating next to each other: 

.termination-service-widget .form-steps {
  float: left;
  display: block;
  width: 40%;
  margin-right: 10%;
}
.termination-service-widget .preview-wrapper {
  float: left;
  display: block;
  width: 50%;
}

I18n

The Termination Service Widget has translations for Dutch (default) and German. You can set the locale of the widget by changing the 'locale' option when the widget is loaded. If you want to override labels and messages in the current locale, you can pass them in the 'labels' and 'alerts' options.

Labels

search_company_header: 'Zoek organisatie'
search_company_prompt: 'Zoek organisatie...'
search_product_header: 'Kies product'
search_product_prompt: 'Kies product...'
step: 'Stap'
create_letter_header: "Maak je opzegbrief"
send_letter_header: "Verstuur je opzegbrief"
show_preview: "Bekijk je opzegbrief"
using_this_signature: "We gebruiken deze handtekening in je opzegbrief:"

date_placeholder: 'Kies een datum'
email_placeholder: "E-mailadres"
send_paid_with_guarantee: "Wij versturen je opzegbrief met opzeggarantie voor"
send_paid_without_guarantee: "Wij versturen je opzegbrief voor"
send_free_with_guarantee: "Wij versturen je opzegbrief met opzeggarantie <span>gratis</span>."
send_free_without_guarantee: "Wij versturen je opzegbrief <span>gratis</span>."

accept_terms: "Ik ga akkoord met de voorwaarden"
which_confirmation_email: "Op welk e-mailadres wil je de bevestiging ontvangen?"
submit_letter: "Verstuur mijn opzegbrief"
cancel: "Annuleren"
optional: "optioneel"
or: "Of"

choose_payment_method: "Kies een betaalmethode:"
choose_payment_issuer: "Kies je bank"

draw_signature: "Teken zelf een handtekening"
reset_signature: "Opnieuw"
submit_signature: "Gebruik deze handtekening"
use_signature_from_name: "gebruik de handtekening op basis van je naam"

download_format: "Download opzegbrief als:"

required: "moet opgegeven zijn"
invalid_email_format: "is niet correct"
no_company_selected: "Er is geen organisatie geselecteerd"
terms_not_accepted: "Je dient akkoord te gaan met de voorwaarden"
invalid_confirmation_email: "Vul een correct emailadres in waarop je de bevestiging wilt ontvangen"
signature_missing: "Je handtekening ontbreekt nog"
payment_method_missing: "Selecteer een betaalmethode"
payment_issuer_missing: "Kies een bank"

cancellation_service: "Opzeggen mogelijk gemaakt door de termination service widget"
guarantee_href: "opzeggarantie?layout=false"

Alerts

cancellation_succeeded: "Je opzegbrief is verstuurd! Je kunt hieronder eventueel nog een organisatie opzeggen."
cancellation_failed: "Sorry, het is helaas niet gelukt om je opzegbrief te versturen. Probeer het later nog eens."
form_has_errors: "We kunnen je opzegbrief nog niet versturen, controleer je gegevens hierboven"

loadTerminationServiceWidget

Loads the latest version of the Termination Service Widget.

Examples:

loadTerminationServiceWidget(function(TerminationServiceWidget){
  widget = new TerminationServiceWidget('#termination-service-widget');
}, {
  skip_stylesheet: true,
  api_key: 'your-api-key',
  host: 'https://www.opzeggen.nl', //make sure to use the correct host for other territories
});

Params:

  • Function callback
  • Hash options (optional), can contain the following options:
    • host the host for the api. This defaults to 'https://www.opzeggen.nl'. Specify another host for another Termination Service territory. For example: 'https://www.kündigen.de'
    • api_key api_key string with a unique identifier to send cancellations to the cancellation web service
    • skip_stylesheet a boolean to indicate if the default stylesheet should be appended or not. Default: false
    • cssHost host uri where the css is located
    • branch_uri uri of the branch for which to search companies
    • company_uri specifies a company to preload in the widget
    • product_uri specifies a product from a company to preload in the widget, requires company_uri as well
    • company hash with company info
    • product hash with product info
    • hide_search boolean indicating wether the search should be shown or not
    • locale string to set the locale of the widget, default: "nl". If you change this you should also change the host to get the right companies and translations.
    • success_url string with the url to redirect to after the order is successful submitted
    • labels hash with key-values for each label that should be replaced
      • search_company_header: "Zoek organisatie"
      • search_company_prompt: "Zoek organisatie..."
      • search_product_header: "Kies product"
      • search_product_prompt: "Kies product..."
      • date_placeholder: "Kies een datum"
      • all the labels from the form, like name, street, city, etc.
    • alerts hash with key-values for each alert that should be replaced, possible keys:
      • cancellation_succeeded (cancellation form successfully submitted)
      • cancellation_failed (backend hasn't accepted the cancellation)
      • form_has_errors (cancellation form has emtpy required fields)

TerminationServiceWidget

TerminationServiceWidget(target, options)

Creates a new Termination Service Widget

Examples:

var terminationWidgetInstance = new TerminationServiceWidget('#widget', {
  api_key: 'your-api-key',
  host: 'https://www.opzeggen.nl', //make sure to use the correct host for other territories
  values: {name: 'My Name'},
  labels: {search_company_header: 'Wat wil je opzeggen?'},
  alerts: {cancellation_succeeded: 'Great job!'}
});

Params:

  • String target
  • Hash options (optional), can contain the following options:
    • api_key api_key string with a unique identifier to send cancellations to the cancellation web service
    • hostthe host for the api. This defaults to 'https://www.opzeggen.nl'. Specify another host for another Termination Service territory. For example: 'https://www.kündigen.de'
    • values hash with key-values that should be prefilled
    • labels hash with key-values for each label that should be replaced
      • search_company_header: "Zoek organisatie"
      • search_company_prompt: "Zoek organisatie..."
      • search_product_header: "Kies product"
      • search_product_prompt: "Kies product..."
      • date_placeholder: "Kies een datum"
      • all the labels from the form, like name, street, city, etc.
    • alerts hash with key-values for each alert that should be replaced, possible keys:
      • cancellation_succeeded (cancellation form successfully submitted)
      • cancellation_failed (backend hasn't accepted the cancellation)
      • form_has_errors (cancellation form has emtpy required fields)
    • branch_uri specifies in which branch to search for companies
    • company_uri specifies a company to preload in the widget
    • product_uri specifies a product from a company to preload in the widget, requires company_uri as well
    • company hash with company info
    • product hash with product info
    • hide_search boolean indicating wether the search should be shown or not
    • locale string to set the locale of the widget, default: "nl"
    • payment_methods array of payment methods and issuers:
      • key the key of the payment method
      • name the name of the payment method
      • issuers a list of issuers to choose from: [{key: 'mybank', name: 'My Bank'}]
    • success_url string with the url to redirect to after the order is successful submitted

Return:

  • TerminationServiceWidget instance of TerminationServiceWidget

setValues(values)

Set values of specified fields

Examples:

terminationWidgetInstance.setValues({address: 'My Street 123'});

Params:

  • Hash values hash with key-values for each field to change

Return:

  • Promise a promise that will be called after the values have been changed.

getValues()

Get values of all fields

Examples:

terminationWidgetInstance.getValues();

Return:

  • Hash a hash with key-value pair for each field

clearValues()

Clears values of all fields

Examples:

terminationWidgetInstance.getValues();

Return:

  • Promise a promise that will be called after the values have been cleared.

setOrder(Hash)

Set the initial order values

Examples:

terminationWidgetInstance.setOrder({
  key: '999998888899999988888',
  payment: { method: 'visa' },
  terms: true,
  confirmation_email: 'name@example.com',
  values: {
    name: 'John',
    address: 'My Street 123',
    city: 'Mytown',
    zip: '1234 AA',
    subscription-number: '99999999'
  }
});

Params:

  • Hash Hash with order data

Return:

  • Promise a promise that will be called after the order has been set.

onDownload(callback)

Handler to be called when a letter is downloaded

Examples:

terminationWidgetInstance.onDownload(callback);

Params:

  • onDownloadCallback callback - arguments: original event, name of the downloaded letter, requested download format

Return:

  • TerminationServiceWidget instance of TerminationServiceWidget

onStartUsage(callback)

Handler to be called when a letter is downloaded

Examples:

terminationWidgetInstance.onDownload(callback);

Params:

  • onStartUsageCallback callback - arguments: name of the downloaded letter

Return:

  • TerminationServiceWidget instance of TerminationServiceWidget

onSuccess(callback)

Handler to be called when a letter is successfully submitted

Examples:

terminationWidgetInstance.onSuccess(callback);

Params:

  • onSuccessCallback callback - arguments: key of the item, the letter order, the item

Return:

  • TerminationServiceWidget instance of TerminationServiceWidget