Advertisement

Currency widgets

If you like our website, and would like to offer some of your support to us, here are three ways you may be inretested in:

Add a free currency converter widget on your website

View the code:
<script type="text/javascript" src="http://www.currency7.com/widgets/c.php?lang=en&from=eur&to=cad&amount=1000"></script>

Above code can be changed based your needs.

  • lang=en:
    by default, display language of the widget is English, but you can change it to Arabic(ar), Japanese(ja), Russian(ru), Spanish(es), Portuguese(pt), Chinese(cn), Traditional Chinese(big5). If you want it to display in Japanese, change the code from "lang=en" to "lang=ja".
  • from=eur:
    eur(Euro) is the base currency when the widget is first loaded. This can be changed based on your needs, e.g. from=aud.
  • to=cad:
    cad(Canadian dollar) is the target currency when the widget is first loaded. This can be changed based on your needs, e.g. to=usd.
  • amount=1000:
    The amount to convert. This can be changed based on your needs, e.g. amount=1.

What does it look like?




If you want a different skin of the widget, just add your own CSS code to customize the look and feel of widget. Below are two customization examples.

Customize the converter widget (A)

View the code:
<style type="text/css">
#mini-converter-container .ccContainer {
width: 250px;
padding: 12px 6px 9px 6px;
background: #369;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoNjksIDk5LCAyMDcpIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJibGFjayIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNnMSkiIC8+PC9zdmc+);
background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0%, rgb(69, 99, 207)), color-stop(100%, black));
background-image: -webkit-linear-gradient(top, rgb(69, 99, 207) 0%, black 100%);
background-image: -moz-linear-gradient(top, rgb(69, 99, 207) 0%, black 100%);
background-image: -ms-linear-gradient(top, rgb(69, 99, 207) 0%, black 100%);
background-image: -o-linear-gradient(top, rgb(69, 99, 207) 0%, black 100%);
background-image: linear-gradient(to bottom, rgb(69, 99, 207) 0%, black 100%);
}
#mini-converter-container .ccContainer label {
color: #fff;
}
#mini-converter-container .ccLinkContainer a {
color: #fff;
}
#mini-converter-container #fromCurr,
#mini-converter-container #toCurr {
width: 97%;
}
#mini-converter-container input,
#mini-converter-container select {
padding: 3px 2px;
}
</style>


<div id="mini-converter-container">
<script type="text/javascript" src="http://currency7.com/widgets/c.php?lang=en&from=jpy&to=eur&amount=10000"></script>
</div>

Customize the converter widget (B)

View the code:
<style type="text/css">
#mini-converter-container .ccContainer {
width: 190px;
border-radius: 8px;
padding: 12px 6px 8px 6px;
background: #939;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyYWRpYWxHcmFkaWVudCBpZD0iZyI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMTc2LCAyOSwgMjI1KSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iYmxhY2siLz48L3JhZGlhbEdyYWRpZW50PjxyZWN0IHg9IjAlIiB5PSIwJSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iYmxhY2siIC8+PHJlY3QgeD0iMCUiIHk9Ii0xMDAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWxsPSJ1cmwoI2cpIiAvPjwvc3ZnPg==);
background-image: -webkit-gradient(radial, 100% 0%, 0, 100% 0%, 227, color-stop(0%, rgb(176, 29, 225)), color-stop(100%, black));
background-image: -webkit-radial-gradient(right top, farthest-side, rgb(176, 29, 225) 0%, black 100%);
background-image: -moz-radial-gradient(right top, farthest-side, rgb(176, 29, 225) 0%, black 100%);
background-image: -ms-radial-gradient(right top, farthest-side, rgb(176, 29, 225) 0%, black 100%);
background-image: -o-radial-gradient(right top, farthest-side, rgb(176, 29, 225) 0%, black 100%);
background-image: radial-gradient(farthest-side at right top, rgb(176, 29, 225) 0%, black 100%);
}
#mini-converter-container .ccContainer label {
color: #fff;
}
#mini-converter-container .ccLinkContainer a {
color: #fff;
}
#mini-converter-container #fromCurr,
#mini-converter-container #toCurr {
width: 97%;
}
#mini-converter-container input,
#mini-converter-container select{
border-radius: 4px;
border: 1px solid #ddd;
padding: 3px;
}
</style>


<div id="mini-converter-container">
<script type="text/javascript" src="http://currency7.com/widgets/c.php?lang=en&from=eur&to=gbp&amount=1"></script>
</div>