{"id":18521715,"url":"https://github.com/transferwise/public-widgets","last_synced_at":"2026-01-25T17:01:40.361Z","repository":{"id":45006656,"uuid":"264929113","full_name":"transferwise/public-widgets","owner":"transferwise","description":"Wise Public Widgets","archived":false,"fork":false,"pushed_at":"2024-04-03T12:50:45.000Z","size":198,"stargazers_count":8,"open_issues_count":4,"forks_count":5,"subscribers_count":67,"default_branch":"master","last_synced_at":"2025-02-17T05:24:49.242Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/transferwise.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-18T12:13:48.000Z","updated_at":"2025-01-01T18:33:22.000Z","dependencies_parsed_at":"2024-11-06T17:34:59.643Z","dependency_job_id":"834ec095-a30e-4fee-8aa0-f9cbb0f06291","html_url":"https://github.com/transferwise/public-widgets","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/transferwise/public-widgets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transferwise%2Fpublic-widgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transferwise%2Fpublic-widgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transferwise%2Fpublic-widgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transferwise%2Fpublic-widgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/transferwise","download_url":"https://codeload.github.com/transferwise/public-widgets/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/transferwise%2Fpublic-widgets/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28755561,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T16:32:25.380Z","status":"ssl_error","status_checked_at":"2026-01-25T16:32:09.189Z","response_time":113,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T17:27:10.623Z","updated_at":"2026-01-25T17:01:40.354Z","avatar_url":"https://github.com/transferwise.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Wise Public Widgets\n\n**Quick Start**: New to web development? Jump to our [Step-by-Step Guide](#quick-start-guide) below.\n\nThe Wise public widgets provide an easy way to embed rich, interactive content onto your website. These widgets help your visitors compare money transfer options and calculate exchange rates, while you can earn commission through the [Wise affiliate program](https://wise.com/gb/affiliate-program/).\n\n## What You Can Embed\n\nThere are two widgets available:\n\n### 📊 Calculator Widget\nInteractive currency exchange calculator showing real-time rates and transfer quotes.\n\n![Wise calculator widget](img/calculator-1.png)\n\n**Perfect for**: Currency conversion tools, travel blogs, expat websites\n\n### 📋 Comparison Widget\nMoney transfer comparison table showing multiple providers and their fees.\n\n![Wise comparison widget](img/comparison-1.png)\n\n**Perfect for**: Financial advice sites, money transfer guides, comparison pages\n\n---\n\n## Quick Start Guide\n\n**Prerequisites**: Basic HTML knowledge and access to edit your website's code.\n\n### Choose Your Widget:\n- **Want a calculator?** → [Calculator Setup](#adding-the-calculator-widget-to-your-site)\n- **Want a comparison table?** → [Comparison Setup](#adding-the-comparison-widget-to-your-site)\n- **Not sure?** → Try the calculator first (it's easier to implement)\n\n### Testing Your Implementation:\n1. After adding the code, refresh your webpage\n2. The widget should load within a few seconds\n3. Try interacting with it to ensure it works properly\n4. **Having issues?** Check our [Troubleshooting](#troubleshooting) section below\n\n---\n\n## Adding the Calculator Widget to Your Site\n\nThe calculator widget requires two pieces of code: an HTML container and a JavaScript snippet. Don't worry - you can copy and paste both!\n\n### Step 1: Add the HTML Container\n\nFirst, place this HTML code where you want the calculator to appear on your page:\n\n```html\n\u003cdiv id=\"wise-calc-widget\"\u003e\n    \u003c!-- The calculator will appear here automatically --\u003e\n\u003c/div\u003e\n```\n\n### Step 2: Add the JavaScript Code\n\nNext, add this JavaScript code **just before the closing `\u003c/body\u003e` tag** in your HTML page:\n```html\n\u003cscript type=\"text/javascript\"\u003e\n(function() {\n  window.onload = function() {\n    /* Change the variables below */\n    var sourceCurrencyCode = \"AUD\";\n    var targetCurrencyCode = \"USD\";\n    var sourceAmount = 2500;\n    var callToActionLabel = \"Get started\";\n    var hideCta = false;\n    var hideDetails = false;\n    var affiliateLink = \"YOUR_TRACKING_LINK\";\n    var lang = \"en\";\n    var width = \"580px\";\n    var height = \"470px\";\n    /* Do not modify the code below */\n    var redirectUrlParams = encodeURIComponent(\"https://wise.com/\");\n    var redirectUrl = encodeURIComponent(affiliateLink + \"?u=\" + redirectUrlParams);\n    var wiseIframeUrl =\n      \"https://wise.com/widget/calculator?sourceCurrencyCode=\" + sourceCurrencyCode + \"\u0026targetCurrencyCode=\" + targetCurrencyCode + \"\u0026amount=\" + sourceAmount + \"\u0026cta=\" + callToActionLabel + \"\u0026hideCta=\" + hideCta + \"\u0026hideDetails=\" + hideDetails + \"\u0026redirectUrl=\" + redirectUrl + \"\u0026lang=\" + lang + \"\u0026theme=light\"\n    var wiseIframe = document.createElement('iframe');wiseIframe.frameBorder = 0;wiseIframe.width = width;wiseIframe.height = height;wiseIframe.id = \"wise-calc\";wiseIframe.scrolling = \"no\";wiseIframe.setAttribute(\"allowtransparency\", \"true\");wiseIframe.setAttribute(\"src\", wiseIframeUrl);\n    document.getElementById(\"wise-calc-widget\").appendChild(wiseIframe);\n  };\n})();\n\u003c/script\u003e\n```\n\n### Step 3: Customize Your Calculator (Optional)\n\nThe calculator works with default settings, but you can customize it by changing the variables at the top of the JavaScript code. Here's what each setting does:\n\n| Variable           | Description                                     | Example                                     |\n|--------------------|-------------------------------------------------|---------------------------------------------|\n| `sourceCurrencyCode` | Set the source currency                         | `\"EUR\"`, `\"GBP\"`, `\"USD\"`, `\"INR\"`, etc                     |\n| `targetCurrencyCode` | Set the target currency                         | `\"EUR\"`, `\"GBP\"`, `\"USD\"`, `\"INR\"`, etc                     |\n| `sourceAmount`       | Set the initial value of money to be converted  | `1000`                                        |\n| `callToActionLabel`  | Set the value of the CTA button                 | `\"Get started\"`                                 |\n| `hideCta`            | Set to true to hide the call to action button   | `true` or `false`                               |\n| `hideDetails`        | Set to true to hide the rate, savings, etc      | `true` or `false`                               |\n| `affiliateLink`      | Your [affiliate link](https://wise.com/gb/affiliate-program/)                             | `\"https://wise.prf.hn/click/camref:11001XXXX\"` |\n| `lang`               | Sets the language of the text in the calculator | `\"en\"`, `\"pt\"`, `\"es\"`, `\"fr\"`, `\"de\"`, `\"ru\"`                      |\n| `width`              | Sets the width of the calculator widget         | `\"580px\"`                                       |\n| `height`             | Sets the height of the calculator widget        | `\"470px\"`                                       |\n\nNote the default `width` and `height` settings (580px wide x 470px high) assume you have `hideDetails` set to false (showing full details). If `hideDetails` is set to true, you can reduce the `height` of the widget container (we recommend 580px wide x 340px high for hidden details).\n\n### Examples\n\nUSD to MXN in Spanish with custom CTA button and hidden details:\n```javascript\n/* Change the variables below */\nvar sourceCurrencyCode = \"USD\";\nvar targetCurrencyCode = \"MXN\";\nvar sourceAmount = 1500;\nvar callToActionLabel = \"Empieza\";\nvar hideCta = false;\nvar hideDetails = true;\nvar affiliateLink = \"https://wise.prf.hn/click/camref:11001XXXX\";\nvar lang = \"es\";\nvar width = \"580px\";\nvar height = \"340px\";\n/* Do not modify the code below */\n```\n\n![Wise calculator widget](img/calculator-2.png)\n\nGBP to INR in English with custom CTA button and full quote breakdown:\n```javascript\n/* Change the variables below */\nvar sourceCurrencyCode = \"GBP\";\nvar targetCurrencyCode = \"INR\";\nvar sourceAmount = 900;\nvar callToActionLabel = \"Get a quote\";\nvar hideCta = false;\nvar hideDetails = false;\nvar affiliateLink = \"https://wise.prf.hn/click/camref:11001XXXX\";\nvar lang = \"en\";\nvar width = \"580px\";\nvar height = \"470px\";\n/* Do not modify the code below */\n```\n\n![Wise calculator widget](img/calculator-3.png)\n\n## Adding the comparison widget to your site\n\n### 1. Add and configure the HTML tag\n\nPlace the following code onto your page where you want the comparison widget to appear. Note that the link will be replaced when the table loads.\n```html\n\u003ca class=\"tw-comparison\"\n  href=\"https://wise.com/gb/compare/?sendAmount=1000\u0026sourceCurrency=GBP\u0026targetCurrency=EUR\"\n  data-lang=\"en\"\n\u003eThe true cost of sending GBP to EUR\u003c/a\u003e\n```\n\nThe HTML above must be configured depending on which version of the widget you'd like to use. The `class` attribute on the first line should be set to one of the following two options:\n\n- **Comparison complete widget**: For a full comparison table with selectors for route and amount, set the class to `tw-comparison` (note this is the default in the code above).\n- **Comparison table only**: For a static comparison table that is fixed to a particular route and amount, set the class to `tw-comparison-table`.\n\nNext, set the source currency, target currency, and amount by editing the `href` attribute. For example, to compare prices for sending 850 GBP to USD in a static comparison table, you'd configure the HTML as follows:\n```html\n\u003ca class=\"tw-comparison-table\"\n  href=\"https://wise.com/gb/compare/?sendAmount=850\u0026sourceCurrency=GBP\u0026targetCurrency=USD\"\n\u003eThe true cost of sending GBP to USD\u003c/a\u003e\n```\n\n### 2. Set any optional parameters\n\nYou can configure the table to behave differently using the following optional parameters. They are set as data attributes on the `\u003ca\u003e` element.\n\n- `data-lang`: `string` ISO 639-1. Sets the language of the comparison table. Default is `en`.\n- `data-source-country`: `string`  ISO 3166-1 alpha-3. Filters results by source country. i.e the origin country from where a user may want to send money from.\n- `data-provider-country`: `string` ISO 3166-1 alpha-2. Filters by provider country. i.e the country which the provider belongs to (e.g Natwest - GB, ANZ - AU). This property is also useful for only showing national banks, rather than \"global\" providers (like Western Union, Moneygram, etc).\n- `data-max-visible-providers`: `number` by default shows 3 providers and the rest are hidden under 'Show more providers' link.\n- `data-expand-disclaimer`: `boolean`. Setting to true will render the table with the disclaimer already opened and scrolls the element into the visible area of the browser window.\n- `data-affiliate-link`: `string` Your [affiliate tracking link](https://wise.com/gb/affiliate-program/). This will determine where users are sent when they click the Send Money CTA.\n\nExamples of possible configurations are provided at the end of this guide.\n\n### 3. Add the comparison table script tag\n\nAdd the following JavaScript code to your page immediately before the closing `\u003c/body\u003e` tag:\n```html\n\u003cscript type=\"text/javascript\"\u003e\n(function() {\n  window.onload = (function(d, s, id) {\n    var js, fjs = d.getElementsByTagName(s)[0];\n    if (d.getElementById(id)) return;\n    js = d.createElement(s); js.id = id;\n    js.src = \"https://widgets.wise.com/widgets.js\";\n    fjs.parentNode.insertBefore(js, fjs);\n  }(document, \"script\", \"transferwise-wjs\"));\n})();\n\u003c/script\u003e\n```\n\n### Examples\n\nTo render a full comparison table in Spanish, showing quotes for sending 850 GBP to USD, limiting the quotes to 4 specific providers, and using your own personal affiliate link in the CTA, you'd use the following HTML:\n```html\n\u003ca class=\"tw-comparison\"\n  href=\"https://wise.com/gb/compare/?sendAmount=850\u0026sourceCurrency=GBP\u0026targetCurrency=USD\"\n  data-lang=\"es\"\n  data-providers=\"transferwise,paypal,starling-bank,xoom,western-union\"\n  data-affiliate-link=\"https://wise.prf.hn/click/camref:11001XXXX\"\n\u003eEl verdadero costo de enviar GBP a USD\u003c/a\u003e\n```\n\n![Wise comparison widget](img/comparison-2.png)\n\nTo render a static comparison table in English, showing quotes for sending 1500 GBP to USD, you'd configure the HTML as follows:\n```html\n\u003ca class=\"tw-comparison-table\"\n  href=\"https://wise.com/gb/compare/?sendAmount=1500\u0026sourceCurrency=GBP\u0026targetCurrency=USD\"\n  data-lang=\"en\"\n\u003eThe true cost of sending GBP to USD\u003c/a\u003e\n```\n\n![Wise comparison widget](img/comparison-3.png)\n\n### Known limitations\n- It's currently only possible to render a single comparison widget per page.\n\n---\n\n## Troubleshooting\n\n### Widget Not Loading?\n1. **Check your internet connection** - Widgets load from Wise's servers\n2. **Verify your HTML structure** - Make sure the container div has the correct ID\n3. **Check JavaScript placement** - The script should be before the closing `\u003c/body\u003e` tag\n4. **Look for JavaScript errors** - Open browser developer tools (F12) and check the Console tab\n\n### Calculator Shows Blank Space?\n- **Check currency codes** - Use 3-letter currency codes (USD, EUR, GBP, etc.)\n- **Verify affiliate link format** - Make sure your affiliate link is valid\n- **Check widget dimensions** - Ensure width/height values include \"px\"\n\n### Comparison Table Not Appearing?\n- **Verify the class name** - Use `tw-comparison` or `tw-comparison-table`\n- **Check the href URL** - Ensure the comparison URL is properly formatted\n- **Wait for loading** - Comparison tables can take 3-5 seconds to load\n\n### Comparison Widget Has Double Borders?\n- **Remove extra containers** - Don't wrap the `\u003ca\u003e` tag in divs with borders or shadows\n- **Avoid conflicting CSS** - The widget has its own styling; extra containers can create double borders\n- **Use minimal HTML** - Just use the `\u003ca\u003e` tag as shown in the examples above\n\n### Still Having Issues?\n1. Compare your code with the examples in this guide\n2. Check that you haven't modified the \"Do not modify\" sections\n\n---\n\n## Advanced Configuration\n\n### Multiple Calculators on One Page\nTo add multiple calculator widgets, change the container ID and iframe ID for each widget:\n\n```html\n\u003c!-- First calculator --\u003e\n\u003cdiv id=\"wise-calc-widget-1\"\u003e\u003c/div\u003e\n\n\u003c!-- Second calculator --\u003e\n\u003cdiv id=\"wise-calc-widget-2\"\u003e\u003c/div\u003e\n```\n\nThen modify the JavaScript to target different containers:\n```javascript\ndocument.getElementById(\"wise-calc-widget-1\").appendChild(wiseIframe);\n// and for the second:\ndocument.getElementById(\"wise-calc-widget-2\").appendChild(wiseIframe2);\n```\n\n### Responsive Design\nThe widgets work on mobile devices, but you may want to adjust dimensions:\n\n```javascript\n// Mobile-friendly dimensions\nvar width = \"100%\";    // Full width\nvar height = \"400px\";  // Shorter height for mobile\n```\n\n---\n\n## Need More Help?\n\n- **Wise Affiliate Program**: [Learn about earning commissions](https://wise.com/gb/affiliate-program/)\n- **Widget Support**: Contact the Wise affiliate team for technical assistance\n- **Currency Codes**: [ISO 4217 currency code list](https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftransferwise%2Fpublic-widgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftransferwise%2Fpublic-widgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftransferwise%2Fpublic-widgets/lists"}