# acceptedlanguagesui

> A simple UI that offers your website to your visitor in its alternate languages.

Latest version **0.0.8** (published 2015-07-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install acceptedlanguagesui
pnpm add acceptedlanguagesui
yarn add acceptedlanguagesui
bun add acceptedlanguagesui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2015-07-25 |
| First published | 2015-07-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Leigh McCulloch |
| Maintainers | leighmcculloch |

## Links

- npm: https://www.npmjs.com/package/acceptedlanguagesui
- Repository: https://github.com/leighmcculloch/acceptedlanguagesui.js
- Homepage: https://github.com/leighmcculloch/acceptedlanguagesui.js#readme
- Issues: https://github.com/leighmcculloch/acceptedlanguagesui.js/issues
- npm.io page: https://npm.io/package/acceptedlanguagesui

## Dependencies (1)

- [acceptedlanguages](https://npm.io/package/acceptedlanguages.md) ^0.0.2

## Recent versions

- 0.0.8 (latest) — 2015-07-25
- 0.0.7 — 2015-07-24
- 0.0.5 — 2015-07-22
- 0.0.4 — 2015-07-22
- 0.0.3 — 2015-07-22
- 0.0.2 — 2015-07-21
- 0.0.1 — 2015-07-21

## README

# acceptedlanguagesui.js

[![Build Status](https://travis-ci.org/leighmcculloch/acceptedlanguagesui.js.svg?branch=master)](https://travis-ci.org/leighmcculloch/acceptedlanguagesui.js)

A simple JavaScript library that asks the visitor if they'd like to view the current page in one of it's alternate languages, if the their browser indicates another language is preferred.

This library does not translate your website, but offers the alternate versions of your website, as defined by `<link rel="alternate" hreflang="es" href="..." />` tags in the `<head>` of your web page. See the usage below for an example.

Uses [acceptedlanguages.js](https://github.com/leighmcculloch/acceptedlanguages.js) to discover the users accepted languages and the pages alternate languages.

## Why

Language dropdowns are often placed below the fold or in inconspicuous locations of a web page. Including this library into a web page invites the visitor to switch quickly to their preferred language without requiring them to discover the language drop down.

## Example

See the [example](example/).

![](README-screenshot.png)

## Install

### Bower

```bash
bower install acceptedlangaugesui
```

### NPM

```bash
npm install acceptedlanguagesui --save
```

### Manual

Download [acceptedlanguages.min.js](https://github.com/leighmcculloch/acceptedlanguages.js/blob/master/dist/acceptedlanguages.min.js) and [acceptedlanguagesui.min.js](dist/acceptedlanguagesui.min.js).

## Usage

### Globals

Include `acceptedlanguages.js` and `acceptedlanguagesui.js` into the page and call `init`.

```html
<html lang="en">
  <head>
    <link rel="alternate" hreflang="pt-BR" href="..." />
    <link rel="alternate" hreflang="es" href="..." />
    <link rel="alternate" hreflang="en" href="..." />
    <script src="acceptedlanguages.js"></script>
    <script src="acceptedlanguagesui.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        acceptedlanguagesui.init();
      };
    </script>
  </head>
  <body>
  </body>
</html>
```

If the visitor is viewing the `en` version of the page, and the browser is configured with the languages `pt, zh-Hans, en-US`, they will be offered to switch to `pt-BR`.

### RequireJS

Include the library and then use as a dependency:

```javascript
define(['acceptedlanguagesui'], function(acceptedLanguagesUI) {
  acceptedlanguagesui.display();
});
```

## Browser Compatibility

All browsers supporting ECMAScript 5: Chrome, Safari, Firefox, IE9, etc. If you need to support older browsers use [es5-shims](https://github.com/es-shims/es5-shim) to get the following:
* `Array.forEach`
* `Array.filter`
* `Array.map`

---
_Source: https://npm.io/package/acceptedlanguagesui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._