JavaScript Library Reference


The 23andMe JavaScript library enables web developers to embed 23andMe features on a third-party website. This library adds a single function named TTAM ("Twenty-Three And Me") to the global namespace. This function is initialized with the client_id from your dashboard, and returns an object that can render 23andMe content.

The latest version, 0.3, is available at https://api.23andme.com/res/js/ttam-0.3.js.

TTAM().connectButton()

This functionality enables a developer to include a "Connect with 23andMe" button for their web apps. You may use a link, or this branded, recognizable button. The developer provides the client_id and scopes for the authorization, and a button is loaded that lets a genotyped user click to authorize access to their data. Clicking the button will automatically show the authorization screen, and redirect to your client's redirect_uri.

<script src="https://api.23andme.com/res/js/ttam-0.3.js"></script>
<div id="wrapper">Button...</div>
<script>
    window.onload = function () {
        var ttam = TTAM('123456789abcdef0123456789abcdef0');
        ttam.connectButton('wrapper', ["basic", "rs1234"]);
    };
</script>

TTAM(client_id).connectButton(element_id, scopes);

element_id The id of the enclosing DOM element. This element's contents will be replaced by the button iframe.
scopes An array of scopes for which to authorize the user.

TTAM().snpTable()

This functionality enables a third party to render a custom single-SNP genotype/phenotype table. The third party provides the phenotype labels, and 23andMe provides genotype data. If a visitor to the third party site has an active 23andMe session in their browser, they'll see their genotype in the table. (Since the table is rendered in an iframe, their data isn't visible to anyone else — not even the third party site itself.) If a visitor isn't currently logged in, they'll be prompted to authenticate with a link to the 23andMe login page, and the iframe content will automatically refresh once they do.

<script src="https://api.23andme.com/res/js/ttam-0.3.js"></script>
<div id="wrapper">Loading...</div>
<script>
    window.onload = function () {
        var ttam = TTAM('123456789abcdef0123456789abcdef0');
        ttam.snpTable('wrapper', 'rs2476601', {
            AA: 'Moderately higher odds of developing hypothyroidism.',
            AG: 'Slightly higher odds of developing hypothyroidism.',
            GG: 'Typical odds of developing hypothyroidism.',
            order: 'AA,AG,GG'
        }, {
            width: 450
        });
    };
</script>

TTAM(client_id).snpTable(element_id, snp, params, options);

element_idThe id of the enclosing DOM element. This element's contents will be replaced by the iframe.
snpThe SNP for which the table will display data.
paramsAn object that maps genotypes to phenotypes. Genotypes should be two-letter strings. This object can also include the property order, which specifies the order of the rows in the table.
options options and their defaults:
options = {
    width: 400, // table width in px
    success: null, // callback function
    error: null // callback function
}