CINXE.COM
Compendium | Roll20: Online virtual tabletop
<!DOCTYPE html> <html lang="en"> <head> <meta name=“facebook-domain-verification” content=“lb07chyng6etwkpmjwu29mkje960mx” /> <!-- Google Tag Manager --> <script id="gtmScript" nonce=''>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl+ '>m_auth=RyNPjkDTh-LgK4oo5gJi6A>m_preview=env-1>m_cookies_win=x'; var n=d.querySelector('[nonce]');n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MKL9HM6');</script> <!-- End Google Tag Manager --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Compendium | Roll20: Online virtual tabletop</title> <meta property="og:title" content="Roll20 - Compendium and Rule Set Directory" /><meta property='og:type' content='website' /> <meta property='og:url' content='https://roll20.net' /> <meta property='og:image' content='images/roll20-compendium-og.jpg' /> <meta property="og:description" content="Browse and reference your favorite RPG rule sets for systems including D&D, Pathfinder, Call of Cthulhu, and Cyberpunk RED." /><meta property='og:locale' content='en_US' /> <meta property='og:locale:alternate' content='af_ZA' /> <meta property='og:locale:alternate' content='ca_CA' /> <meta property='og:locale:alternate' content='zh_Hant_TW' /> <meta property='og:locale:alternate' content='cs_CZ' /> <meta property='og:locale:alternate' content='da_DK' /> <meta property='og:locale:alternate' content='nl_NL' /> <meta property='og:locale:alternate' content='fr_FR' /> <meta property='og:locale:alternate' content='de_DE' /> <meta property='og:locale:alternate' content='el_GR' /> <meta property='og:locale:alternate' content='he_IL' /> <meta property='og:locale:alternate' content='hu_HU' /> <meta property='og:locale:alternate' content='it_IT' /> <meta property='og:locale:alternate' content='ja_JP' /> <meta property='og:locale:alternate' content='ko_KR' /> <meta property='og:locale:alternate' content='pl_PL' /> <meta property='og:locale:alternate' content='pt_PT' /> <meta property='og:locale:alternate' content='ru_RU' /> <meta property='og:locale:alternate' content='es_ES' /> <meta property='og:locale:alternate' content='sv_SE' /> <meta property='og:locale:alternate' content='tr_TR' /> <meta property='og:locale:alternate' content='uk_UK' /> <meta property="og:site_name" content="Roll20" /> <meta property="og:logo" content="https://roll20.net/images/logo-die-large.png?1742502686" /> <meta property="og:image:alt" content='Roll20 logo, a pink and purple 20-sided die with the number twenty featured on its face. The die sits on top of the name "Roll20" in black font.' /> <meta name="twitter:card" content="summary"/> <meta name="twitter:site" content="@roll20app"/> <link rel="stylesheet" href="/v3/assets/css/marketplace-v3.css?1742502686" type="text/css" /> <link rel="stylesheet" href="/v3/assets/js/libs/@fortawesome/fontawesome-free/css/all.min.css?1742502686" type="text/css" /> <link rel="stylesheet" href="/v3/assets/js/libs/sweetalert2/dist/sweetalert2.min.css?1742502686" type="text/css" /> <link rel="stylesheet" href="/v2/css/stripe.css?1742502686" type="text/css" /> <link rel="stylesheet" href="/css/fonts.css?1742502685" type="text/css" /> <link rel="stylesheet" href="/v2/css/dropzone.css?1742502686" type="text/css" /> <script type="text/javascript" src="/assets/v3.js?1742502686"></script> <script src="https://js.stripe.com/v3/"></script> <script type="text/javascript"> const stripe = Stripe("pk_live_1vH03GH31ZvT2lI7yU8bcClq9jDHOPU4OlnsWqZKu2s4Vs014SXpmjsjnRv37wD8PhLLkYj1YcLSxVDbdzba2HZiQ00qGgUFDqB"); const elements = stripe.elements(); </script> <script src="https://cdn.prosperstack.com/flow/2.0.2/flow.min.js"></script> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <script type="text/javascript"> $('html').attr('data-theme', 'light'); </script> <script type="text/javascript"> const urlString = new URLSearchParams(window.location.search); const url = new URL(window.location.href); url.pathname = url.pathname.split('/').slice(0, 3).join('/'); // get the first one or two parts of the url path i.e. '/campaigns/search' or '/login' var _conv_page_type = url.toString(); var _conv_category_id = ""; // unused var _conv_category_name = ""; // only used in V2 marketplace var _conv_product_sku = ""; // only used in V2 marketplace var _conv_product_name = urlString.has("sheet_shortname") ? urlString.get("sheet_shortname") : "" // only used in V2 marketplace & characters var _conv_product_price = ""; // only used in V2 marketplace var _conv_customer_id = 'visitor'; var _conv_custom_v1 = 'loggedout'; var _conv_custom_v2 = ""; // unused var _conv_custom_v3 = ""; // unused var _conv_custom_v4 = ""; // unused </script> <script type="text/javascript" src="//cdn-4.convertexperiments.com/v1/js/10042023-10042444.js" integrity="sha384-gSDcZjQNbDoXzGah4K3Gb02Y6qVZNgNiMUn6LdQ5FCsldO6ne//TUKkgKabzB65Z"></script> </head> <body> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MKL9HM6>m_auth=RyNPjkDTh-LgK4oo5gJi6A>m_preview=env-1>m_cookies_win=x" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <script> const navClick = function(url) { location.assign(url); } </script> <header id="header" class="header header-legacy" role="banner"> <div class="header-top"> <div class="container"> <div class="d-flex py-3 flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-lg-center"> <div class="header-logo order-1 order-lg-0"> <a href="https://app.roll20.net"> <img src="https://app.roll20.net/v2/images/roll20-logo.png?v=2" alt="Roll20 logo" style="" class="withoutad" /> </a> </div> <div class="header-advertisment order-0 order-lg-1 pl-0 pl-lg-4 pl-xl-0 pb-2 pb-lg-0"> <script type='text/javascript'> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; (function() { var gads = document.createElement('script'); gads.async = true; gads.type = 'text/javascript'; var useSSL = 'https:' == document.location.protocol; gads.src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js'; var node = document.getElementsByTagName('script')[0]; node.parentNode.insertBefore(gads, node); })(); </script> <script type='text/javascript'> googletag.cmd.push(function() { googletag.defineSlot('/34541132/Leaderboard-Compendium', [728, 90], 'dfp-1349444251840-1').addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.enableServices(); }); </script> <div class="bna" style="max-width: 100%; "> <span class="footer"> <a href="https://app.roll20.net/create-account?bannertext&utm_source=inhouse&utm_medium=banner&utm_campaign=freetextCTA"> Create a free account </a> </span> <div id='dfp-1349444251840-1' style='width:728px; overflow: hidden; height:90px; margin-left: auto; margin-right: auto; max-width: 100%;'> <script type='text/javascript'> googletag.cmd.push(function() { /*$("#dfp-1349444251840-1 a").remove();*/ googletag.display('dfp-1349444251840-1'); }); </script> </div> </div> </div> </div> </div> </div> <div class="header-navbar"> <div class="container"> <nav class="navbar navbar-expand-lg navbar-legacy py-2 py-lg-0"> <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar-legacy" aria-controls="navbar-legacy" aria-expanded="false" aria-label="Toggle navigation"> <span class="icon-bar top-bar mt-0"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> <div class="collapse navbar-collapse justify-content-between" id="navbar-legacy"> <ul class="navbar-nav"> <li class="nav-item"> <a href="https://app.roll20.net/" class="nav-link" id="menu-play-now">Play Now</a> </li> <li class="nav-item"> <a href="https://app.roll20.net/lfg" class="nav-link" id="menu-join-game">Join a Game</a> </li> <li class="nav-item dropdown mega-dropdown"> <a href="https://marketplace.roll20.net" class="nav-link dropdown-toggle" id="menu-marketplace" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onClick="navClick('https://marketplace.roll20.net')">Marketplace</a> <ul class="dropdown-menu mega-dropdown-menu" aria-labelledby="menu-marketplace"> <li class="row"> <div class="col-12 col-lg-3"> <div class="mega-menu__links"> <ul class="p-0"> <li> <a href="https://marketplace.roll20.net" class="dropdown-item">What's New</a> </li> <li> <a href="https://marketplace.roll20.net/browse" class="dropdown-item">Browse</a> </li> <li> <a href="https://marketplace.roll20.net/gift/" class="dropdown-item">Give a Gift</a> </li> <li> <a href="https://marketplace.roll20.net/coupon/" class="dropdown-item">Redeem a Code</a> </li> <!-- <li> <a href="https://merchoforr.com/" class="dropdown-item">Merchandise</a> </li> --> </ul> </div> </div> <div class="col-12 col-lg-9 col-xl-9"> <div class="mega-menu__cards pt-3 pt-xl-0 pr-lg-3"> <div class="row"> <div class="col-12 col-md-6 col-xl-3"> <div class="card mb-3 mb-xl-0"> <div class="row align-items-center"> <div class="col col-xl-12"> <a href="https://marketplace.roll20.net/browse/bundle/31887/dandd-core-rulebook-bundle-2024"> <span class="sr-only">D&D Core Rulebook Bundle (2024) </span> <img src="https://files.d20.io/marketplace/3970529/F_hjWLAuwz0TkrcIf3BxUw/med.png?1718712581469" class="card-img-top img-center img-fluid" alt="" /> </a> </div> <div class="col-8 col-xl-12 pl-2"> <div class="card-body pl-0 px-xl-4 py-0 py-xl-3"> <a href="https://marketplace.roll20.net/browse/bundle/31887/dandd-core-rulebook-bundle-2024">D&D Core Rulebook Bundle (2024) </a><br/> <span class="card-title">by Wizards of the Coast</span> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-xl-3"> <div class="card mb-3 mb-xl-0"> <div class="row align-items-center"> <div class="col col-xl-12"> <a href="https://marketplace.roll20.net/browse/bundle/15575/dandd-curse-of-strahd"> <span class="sr-only">D&D Curse of Strahd</span> <img src="https://files.d20.io/marketplace/3977000/dafVzdTIILuozTjInO_vEA/med.png?1719247876490" class="card-img-top img-center img-fluid" alt="" /> </a> </div> <div class="col-8 col-xl-12 pl-2"> <div class="card-body pl-0 px-xl-4 py-0 py-xl-3"> <a href="https://marketplace.roll20.net/browse/bundle/15575/dandd-curse-of-strahd">D&D Curse of Strahd</a><br/> <span class="card-title">by Wizards of the Coast</span> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-xl-3"> <div class="card mb-3 mb-xl-0"> <div class="row align-items-center"> <div class="col col-xl-12"> <a href="https://marketplace.roll20.net/browse/bundle/29589/pathfinder-core-mega-bundle"> <span class="sr-only">Pathfinder Core Mega Bundle</span> <img src="https://files.d20.io/marketplace/3814843/kr9hNl-iDXGErQDeLyvRdQ/med.png?1709085860170" class="card-img-top img-center img-fluid" alt="" /> </a> </div> <div class="col-8 col-xl-12 pl-2"> <div class="card-body pl-0 px-xl-4 py-0 py-xl-3"> <a href="https://marketplace.roll20.net/browse/bundle/29589/pathfinder-core-mega-bundle">Pathfinder Core Mega Bundle</a><br/> <span class="card-title">by Paizo</span> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-xl-3"> <div class="card mb-3 mb-xl-0"> <div class="row align-items-center"> <div class="col col-xl-12"> <a href="https://marketplace.roll20.net/browse/bundle/13881/cyberpunk-red"> <span class="sr-only">Cyberpunk RED</span> <img src="https://files.d20.io/marketplace/2804303/qu8j0OPMgC21GjOtNunYzw/med.jpeg?1667917715094" class="card-img-top img-center img-fluid" alt="" /> </a> </div> <div class="col-8 col-xl-12 pl-2"> <div class="card-body pl-0 px-xl-4 py-0 py-xl-3"> <a href="https://marketplace.roll20.net/browse/bundle/13881/cyberpunk-red">Cyberpunk RED</a><br/> <span class="card-title">by R. Talsorian Games</span> </div> </div> </div> </div> </div> </div> </div> </div> </li> </ul> </li> <li class="nav-item dropdown mega-dropdown"> <a href="https://roll20.net/compendium" class="nav-link dropdown-toggle" id="menu-tools" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onClick="navClick('https://roll20.net/compendium')">Tools</a> <ul class="dropdown-menu mega-dropdown-menu" aria-labelledby="menu-tools"> <li class="row"> <div class="col-12 col-lg-3"> <div class="mega-menu__links"> <ul class="p-0"> <li> <a href="https://roll20.net/compendium" class="dropdown-item">Compendium</a> </li> <li> <a href="https://app.roll20.net/characters" class="dropdown-item">Characters</a> </li> <li> <a href="https://app.roll20.net/audio_library/" class="dropdown-item">Manage Audio</a> </li> <li> <a href="https://app.roll20.net/marker-library" class="dropdown-item">Token Marker Library</a> </li> <li> <a href="https://pages.roll20.net/companionapp" class="dropdown-item">Roll20 Companion App</a> </li> <li> <a href="https://pages.roll20.net/dnd/" class="dropdown-item">D&D Hub</a> </li> <li> <a href="https://pages.roll20.net/marvel-multiverse" class="dropdown-item">Marvel Hub</a> </li> <li> <a href="https://gmhub.roll20.net/" class="dropdown-item">GM Hub</a> </li> <li> <a href="https://dungeonscrawl.com/" class="dropdown-item">Dungeon Scrawl</a> </li> <li> <a href="https://app.demiplane.com/home" class="dropdown-item">Demiplane</a> </li> </ul> </div> </div> <div class="col-12 col-lg-9 col-xl-9"> <div class="mega-menu__cards pt-3 pt-xl-0 pr-lg-3"> <div class="row"> <div class="col-12 col-md-6 col-xl-3"> <div class="card mb-3 mb-xl-0"> <div class="row align-items-center"> <div class="col col-xl-12"> <a href="https://app.roll20.net/characters/"> <img src="/images/Roll20Characters-TopNav.jpg" class="card-img-top img-center img-fluid" alt="Tutorial" /> </a> </div> <div class="col-8 col-xl-12 pl-2"> <div class="card-body pl-0 px-xl-4 py-0 py-xl-3"> <a href="https://app.roll20.net/characters/">Characters</a> <div class="shorthr"></div> <span class="gameinfo">Create, Manage, and Play Characters</span> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-xl-3"> <div class="card mb-3 mb-xl-0"> <div class="row align-items-center"> <div class="col col-xl-12"> <a href="https://roll20.net/compendium/"> <img src="/images/banner-compendium.jpg" class="card-img-top img-center img-fluid" alt="Compedium" /> </a> </div> <div class="col-8 col-xl-12 pl-2"> <div class="card-body pl-0 px-xl-4 py-0 py-xl-3"> <a href="https://roll20.net/compendium/">Compendium</a> <div class="shorthr"></div> <span class="gameinfo">Your System Come To Life</span> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-xl-3"> <div class="card mb-3 mb-xl-0"> <div class="row align-items-center"> <div class="col col-xl-12"> <a href="https://app.roll20.net/vault/characters"> <img src="/images/banner-character-vault.jpg" class="card-img-top img-center img-fluid" alt="Character Vault" /> </a> </div> <div class="col-8 col-xl-12 pl-2"> <div class="card-body pl-0 px-xl-4 py-0 py-xl-3"> <a href="https://app.roll20.net/vault/characters">Character Vault</a> <div class="shorthr"></div> <span class="gameinfo">Create, Manage, and Play Characters</span> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-xl-3"> <div class="card mb-3 mb-xl-0"> <div class="row align-items-center"> <div class="col col-xl-12"> <a href="https://dungeonscrawl.com"> <img src="/images/banner-dungeonscrawl.png" class="card-img-top img-center img-fluid" alt="Dungeon Scrawl" /> </a> </div> <div class="col-8 col-xl-12 pl-2"> <div class="card-body pl-0 px-xl-4 py-0 py-xl-3"> <a href="https://dungeonscrawl.com">Dungeon Scrawl</a> <div class="shorthr"></div> <span class="gameinfo">Create Maps for your Games</span> </div> </div> </div> </div> </div> </div> </div> </div> </li> </ul> </li> <li class="nav-item dropdown mega-dropdown"> <a href="https://app.roll20.net/forum" class="nav-link dropdown-toggle" role="button" id="menu-community" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onClick="navClick('https://app.roll20.net/forum')"> Community</a> <ul class="dropdown-menu mega-dropdown-menu" aria-labelledby="menu-community"> <li class="row"> <div class="col-12 col-lg-3"> <div class="mega-menu__links"> <ul class="p-0"> <li> <a href=" https://blog.roll20.net/" class="dropdown-item">Blog</a> </li> <li> <a href="https://roll20.net/help" class="dropdown-item" target="_blank" class="dropdown-item">Help Center</a> </li> <li> <a href="https://roll20.zendesk.com/hc/articles/360037772613-Change-Log" target="_blank" class="dropdown-item">Change Log</a> </li> <li> <a href="https://app.roll20.net/forum/" class="dropdown-item">Forums</a> </li> <li> <a href="https://wiki.roll20.net/Main_Page" class="dropdown-item">Community Wiki</a> </li> <li> <a href="http://www.twitch.tv/roll20app" target="_blank" class="dropdown-item">Live Stream</a> </li> <li> <a href="https://www.youtube.com/channel/UCHC1kWACzA7G6D2fqkqsRDg" target="_blank" class="dropdown-item">VODs</a> </li> <li> <a href="https://pages.roll20.net/ambassador-program" target="_blank" class="dropdown-item">Ambassador Program</a> </li> </ul> </div> </div> <div class="col-12 col-lg-9 col-xl-9"> <div class="mega-menu__cards pt-3 pt-xl-0 pr-lg-3"> <div class="row"> <div class="col-12 col-md-6 col-xl-3"> <div class="card mb-3 mb-xl-0"> <div class="row align-items-center"> <div class="col col-xl-12"> <a href="https://blog.roll20.net/posts/the-new-roll20-tabletop-fast-free-and-stunning/"> <span class="sr-only">The New Roll20 Tabletop</span> <img src="https://files.d20.io/images/406055047/NBEegvOJ3pSZYTXXhId6xQ/original.jpg?1724188557376" class="card-img-top img-center img-fluid" alt="" /> </a> </div> <div class="col-8 col-xl-12 pl-2"> <div class="card-body pl-0 px-xl-4 py-0 py-xl-3"> <a href="https://blog.roll20.net/posts/the-new-roll20-tabletop-fast-free-and-stunning/"> The New Roll20 Tabletop </a> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-xl-3"> <div class="card mb-3 mb-xl-0"> <div class="row align-items-center"> <div class="col col-xl-12"> <a href="https://blog.roll20.net/posts/roll20-discord-activity/"> <span class="sr-only">Play Roll20 on Discord</span> <img src="https://files.d20.io/images/406055142/WxdDedtmZSm7uIUVGANdzg/original.jpg?1724188591159" class="card-img-top img-center img-fluid" alt="" /> </a> </div> <div class="col-8 col-xl-12 pl-2"> <div class="card-body pl-0 px-xl-4 py-0 py-xl-3"> <a href="https://blog.roll20.net/posts/roll20-discord-activity/"> Play Roll20 on Discord </a> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-xl-3"> <div class="card mb-3 mb-xl-0"> <div class="row align-items-center"> <div class="col col-xl-12"> <a href="https://app.roll20.net/characters/create/dnd2024byroll20"> <span class="sr-only">Play D&D 2024</span> <img src="https://files.d20.io/images/409822399/wtLMqDnqy0jvxjxvOYtaPw/original.jpg?1726541310739" class="card-img-top img-center img-fluid" alt="" /> </a> </div> <div class="col-8 col-xl-12 pl-2"> <div class="card-body pl-0 px-xl-4 py-0 py-xl-3"> <a href="https://app.roll20.net/characters/create/dnd2024byroll20"> Play D&D 2024 </a> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-xl-3"> <div class="card mb-3 mb-xl-0"> <div class="row align-items-center"> <div class="col col-xl-12"> <a href="https://blog.roll20.net/posts/roll20-has-acquired-demiplane/"> <span class="sr-only">Demiplane Joins Roll20</span> <img src="https://files.d20.io/images/406056058/6P2sO-_xeNWhbSgKpW7rcw/original.jpg?1724189145614" class="card-img-top img-center img-fluid" alt="" /> </a> </div> <div class="col-8 col-xl-12 pl-2"> <div class="card-body pl-0 px-xl-4 py-0 py-xl-3"> <a href="https://blog.roll20.net/posts/roll20-has-acquired-demiplane/"> Demiplane Joins Roll20 </a> </div> </div> </div> </div> </div> </div> </div> </div> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="https://app.roll20.net/why-subscribe-to-roll20" id="nav-subscribe">Subscribe</a> </li> </ul> <ul class="navbar-nav navbar-notifications"> <li class="nav-item dropdown dropdown--click-only no-caret topbarsitenotifications"> <a href="#" class="nav-link nav-icon-only dropdown-toggle" id="menu-site-alerts" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Open Alerts Panel"> <span class="alerts-icon"> <i class="fas fa-bell "></i> </span> </a> <div class="dropdown-menu dropdown-menu-right dropdown-menu--xl py-0" > <div class="list-group list-group-flush"> <div class="list-group sitenotifications"> <a href="https://blog.roll20.net/posts/play-dd-2024-your-way-on-roll20/" class="list-group-item list-group-item-action new"> <div class="d-flex"> <div> <img src="/images/Notification System Icons/social-pink.png" class="mr-3" style="width: 40px; height: 40px;" alt=""> </div> <div> <div class="text-sm lh-150"> <span class="font-weight-bold d-block">New D&D Character Sheet Available</span> <span class="">Roll20's new D&D character sheet, which supports both 2014 and 2024 rules, is live and free for all users.</span> </div> </div> </div> </a> <a href="https://blog.roll20.net/posts/dd-2024-legacy-and-new-character-sheets-unite/#multiplesheets" class="list-group-item list-group-item-action new"> <div class="d-flex"> <div> <img src="https://s3.amazonaws.com/files.d20.io/images/408806657/Cz6McatFyq96_GoqMUDEzw/thumb.png" class="mr-3" style="width: 40px; height: 40px;" alt=""> </div> <div> <div class="text-sm lh-150"> <span class="font-weight-bold d-block">Use Both D&D 5E Character Sheets</span> <span class="">Both classic and new D&D 5E sheets can be used in a single campaign, exclusively in Jumpgate.</span> </div> </div> </div> </a> <a href="https://blog.roll20.net/posts/roll20-tabletop-effects-fx-tool-now-free-for-all-users/" class="list-group-item list-group-item-action new"> <div class="d-flex"> <div> <img src="/images/Notification System Icons/plus-pink.png" class="mr-3" style="width: 40px; height: 40px;" alt=""> </div> <div> <div class="text-sm lh-150"> <span class="font-weight-bold d-block">Effects (FX) Tool Now Free for All! </span> <span class="">Enjoy new and optimized VTT visuals using Project Jumpgate's uplifted Effects tool. </span> </div> </div> </div> </a> <a href="https://app.roll20.net/characters/" class="list-group-item list-group-item-action new"> <div class="d-flex"> <div> <img src="/images/Notification System Icons/social-pink.png" class="mr-3" style="width: 40px; height: 40px;" alt=""> </div> <div> <div class="text-sm lh-150"> <span class="font-weight-bold d-block">Roll20 Characters: D&D + Candela Obscura</span> <span class="">D&D 5E + Candela Obscura sheets are now available in Roll20 Characters to create and manage outside the VTT.</span> </div> </div> </div> </a> </div> </div> <div class="py-2 text-center border-top"> <button id="navbar-notifications__see-more-btn" class="btn btn-link btn-sm text-muted font-weight-bold btn-block">See More</button> </div> </div> </li> <li class="nav-item dropdown dropdown--click-only"> <a href="#" class="nav-link dropdown-toggle" id="menu-signin" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sign In</a> <div class="dropdown-menu dropdown-menu-right" > <form action="https://app.roll20.net/sessions/create?backto=https://roll20.net/compendium/" method="post" class="px-3"> <div class="form-group"> <label for="input_login-email" class="col-form-label-sm m-0">Email address</label> <input type="email" name="email" class="form-control form-control-sm" id="input_login-email" placeholder="email@example.com"> </div> <div class="form-group"> <label for="input_login-password" class="col-form-label-sm m-0">Password</label> <input type="password" name="password" class="form-control form-control-sm" id="input_login-password" placeholder="Password" autocomplete="new-password"> </div> <button type="submit" class="btn btn-primary btn-sm">Sign in</button> </form> <div class="dropdown-divider"></div> <div> <a class="dropdown-item" href="https://app.roll20.net/create-account">New around here? Sign up</a> <a class="dropdown-item" href="https://app.roll20.net/forgot-password">Forgot password?</a> </div> </div> </li> </ul> <ul class="navbar-nav navbar-expanded navbar-notifications navbar-notifications--mobile d-none flex-row"> <li class="nav-item"> <a href="#" class="nav-link nav-icon-only " id="menu-mobile-site-alerts" aria-label="Open Mobile Alerts Menu"> <span class="alerts-icon"> <i class="fas fa-bell"></i> </span> </a> </li> <li class="nav-item"> <a href="https://app.roll20.netlogin" class="nav-link" id="menu-mobile-signin">Sign In</a> </li> </ul> </div> </nav> </div> </div> </header> <div id="compendium-browser"> </div> <script type="text/javascript" src="https://cdn.roll20.net/production/compendium-browser/compendium_browser.latest.bundle.js"></script> <footer id="footer" class="container globalfooter"> <div class="footer-terms"> <a href="https://roll20.net/" target="_blank"><img src="/v3/assets/img/logos/roll20-logo-new-light.svg" alt="Go to Roll20 Homepage"/></a> <span>© Roll20, LLC | <a href="https://help.roll20.net/hc/articles/360037770793-Terms-of-Service-and-Privacy-Policy#Notification_of_Copyright_Infringement_.28DMCA_Policy.29" target="_blank">Terms of Service & Privacy Policy</a> | <a href="https://help.roll20.net/hc/articles/360037770833-DMCA" target="_blank">DMCA</a> | <a href="https://roll20.zendesk.com/hc/requests/new " target="_blank">Contact Us</a> | <a href="https://roll20.net/help" target="_blank">Help Center</a> | All rights reserved. All product and company names are trademarks<sup>™</sup> or registered<sup>®</sup> trademarks of their respective holders.</span> <div class="socials"> <a href="http://discord.gg/roll20" target="_blank"><img src="/v2/images/Discord-LightMode.png" alt="Join the Roll20 Discord Server" /></a> <a href="https://www.facebook.com/roll20app/" target="_blank"><img src="/v2/images/Icon-Facebook.png" alt="Go to Roll20 on Facebook" /></a> <a href="https://x.com/roll20app" target="_blank"><img src="/v2/images/Icon-X.png" alt="Go to Roll20 on Twitter" /></a> <a href="https://bsky.app/profile/roll20.net" target="_blank"><img src="/v2/images/Icon-Bluesky.png" alt="Go to Roll20 on Bluesky" /></a> <a href="https://www.instagram.com/roll20app/" target="_blank"><img src="/v2/images/Icon-Instagram.png" alt="Go to Roll20 on Instagram" /></a> <a href=" https://www.tiktok.com/@roll20app?lang=en" target="_blank"><img src="/v2/images/Icon-TikTok.png" alt="Go to Roll20 on TikTok" style="max-height: 41px;"/></a> <a href="https://www.youtube.com/roll20app" target="_blank"><img src="/v2/images/Icon-YouTube.png" alt="Go to Roll20 on YouTube" /></a> <a href="https://www.twitch.tv/roll20app " target="_blank"><img src="/v2/images/Icon-Twitch.png" alt="Go to Roll20 on Twitch" /></a> <a href="https://www.linkedin.com/company/roll20/" target="_blank"><img src="/v2/images/Icon-LinkedIn.png" alt="Go to Roll20 on LinkedIn" /></a> </div> </div> <div class="footer-content"> <span class="powered-by">Powered by Roll20</span> <div class="grid-container"> <div class="section"> <a class="section-title" href="https://roll20.net" target="_blank">Roll20 <br> The #1 Tabletop for Playing RPGs Online</a> <p class="collapsed-section-title">Roll20 <br> <i>The #1 Tabletop for Playing RPGs Online</i></p> <div class="section-content"> <a href="https://roll20.net" target="_blank">Roll20 Tabletop</a> <a href="https://app.roll20.net/characters" target="_blank">Roll20 Characters</a> <a href="https://marketplace.roll20.net" target="_blank">Roll20 Marketplace</a> <a href="https://roll20.net/compendium" target="_blank">Roll20 Compendium</a> </div> </div> <div class="section"> <a class="section-title" href="https://drivethrurpg.com/" target="_blank" aria-label="Go to DriveThru Homepage">DriveThru <br> The Largest RPG Marketplace</a> <p class="collapsed-section-title">DriveThru <br> <i>The Largest RPG Marketplace</i></p> <div class="section-content"> <a class="homepage-link" href="https://drivethrurpg.com/" target="_blank">DriveThru</a> <a href="https://www.drivethrucomics.com/" target="_blank">DriveThruComics</a> <a href="https://www.drivethrufiction.com/index.php" target="_blank">DriveThruFiction</a> <a href="https://www.drivethrucards.com/" target="_blank">DriveThruCards</a> <a href="https://www.wargamevault.com/" target="_blank">Wargame Vault</a> </div> </div> <div class="section"> <a class="section-title" href="https://app.demiplane.com/home" target="_blank" aria-label="Go to Demiplane Homepage">Demiplane <br> Official Character Creation and Game Companion</a> <p class="collapsed-section-title">Demiplane <br> <i>Official Character Creation and Game Companion</i></p> <div class="section-content"> <a class="homepage-link" href="https://app.demiplane.com/home" target="_blank">Demiplane</a> <a href="https://app.demiplane.com/nexus/pathfinder2e" target="_blank">Pathfinder Nexus</a> <a href="https://app.demiplane.com/nexus/daggerheart" target="_blank">Daggerheart Nexus</a> <a href="https://app.demiplane.com/nexus/vampire" target="_blank">Vampire: The Masquerade Nexus</a> <a href="https://app.demiplane.com/nexus/marvelrpg" target="_blank">Marvel Multiverse RPG Nexus</a> <a href="https://app.demiplane.com/nexus/cosmererpg" target="_blank">Cosmere RPG Nexus</a> <a href="https://cyberpunkrednexus.com" target="_blank">Cyberpunk RED Nexus</a> </div> </div> <div class="section"> <a class="section-title" href="https://www.dungeonscrawl.com/" target="_blank" aria-label="Go to Dungeon Scrawl Homepage">Dungeon Scrawl <br> Create RPG Maps in Minutes</a> <p class="collapsed-section-title">Dungeon Scrawl <br> <i>Create RPG Maps in Minutes</i></p> <div class="section-content"> <a class="homepage-link" href="https://www.dungeonscrawl.com/" target="_blank">Dungeon Scrawl</a> <a href="https://www.dungeonscrawl.com/" target="_blank">Create a Map</a> </div> </div> <div class="section"> <span class="section-title community-content">Community Content</span> <p class="collapsed-section-title">Community Content <br> <i>Adventure by Fans Everywhere</i></p> <div class="section-content"> <a href="https://www.dmsguild.com/" target="_blank">Dungeon Masters Guild (D&D)</a> <a href="https://www.pathfinderinfinite.com/" target="_blank">Pathfinder Infinite</a> <a href="https://www.starfinderinfinite.com/" target="_blank">Starfinder Infinite</a> <a href="https://www.drivethrurpg.com/cc/16/Miskatonic " target="_blank">Miskatonic Repository</a> <a href="https://www.storytellersvault.com/" target="_blank">Storytellers Vault</a> </div> </div> </div> </div> <div class="footer-bottom"> <div class="dice"> <img src="/v2/images/Icon-Dice.svg" alt="Dice Icon"/> </div> <div class="roll20-logos"> <div class="roll20-logo-text"> <img src="/v2/images/roll20-logo.png" alt="Pink Roll20 Logo"/> <p class="bottom-text">Everything for <br> your adventures</p> </div> <div class="all-logos"> <img src="/v3/assets/img/logos/roll20-logo-new-light.svg" alt="Pink Roll20 Logo"/> <img src="/v2/images/DriveThruRPG-LG.png" alt="DriveThru RPG Logo"/> <img src="/v2/images/Demiplane-LG.png" alt="Demiplane Logo"/> <img src="/v2/images/DMG-LG.png" alt="Dungeon Masters Guild Logo"/> <img src="/v2/images/DungeonScrawl-LG.png" alt="Dungeown Scrawl"/> </div> </div> </div> </footer> <style> #footer { padding-top: 3rem; } .footer-terms{ display: flex; justify-content: space-around; align-items: center; font-weight: 300; font-size: 1.3rem; line-height: 1.5rem; } .footer-terms span{ width: 60%; padding-left: 1rem; font-size: 1rem; } sup { /* necessary to override stylings */ top: 0; font-size: 100%; } .powered-by { display: flex; align-items: center; text-align: center; padding: 2rem 3.5rem; } .powered-by::before, .powered-by::after { content: ""; flex: 1; border-bottom: 1px solid rgba(98, 91, 101, 1); margin: 0 10px; } .section-content{ display: flex; flex-direction: column; } .section-content a{ color: var(--color-grayscale1); } .homepage-link{ display: none; } .community-content{ color: var(--color-primary-text) !important; } /* Large screens - 3 columns layout (2, 1, 2) */ .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* Three columns */ gap: 10px; align-items: start; /* Ensures items align to the top of the grid */ grid-auto-flow: dense; padding-left: 3.5rem; } /* Define where each section goes in the grid */ .section:nth-child(1), .section:nth-child(2) { grid-column: 1; } .section:nth-child(3) { grid-column: 2; grid-row: span 2; } .section:nth-child(4){ grid-column: 3; grid-row: 1; } .section:nth-child(5) { grid-column: 3; grid-row: 2; /* below two lines are to move the final section up out of the set grid to match design */ position: relative; top: -60px; } .collapsed-section-title{ display: none; } .dice{ display: flex; align-items: center; text-align: center; justify-content: center; padding: 0 7.5rem; } .dice::before, .dice::after { content: ""; flex: 1; border-bottom: 1px solid rgba(98, 91, 101, 1); margin: 0 10px; } .roll20-logo-text{ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .roll20-logo-text img{ height: 5rem; } .bottom-text{ color: var(--color-grayscale1); text-transform: uppercase; font-weight: 600; } .footer-bottom{ padding-bottom: 30px; } .roll20-logos{ padding: 2rem 0 2rem 3rem; display: flex; justify-content: space-between; } .all-logos{ text-align: center; width: 73%; max-width: 50rem; } .all-logos img{ padding-right: 1rem; } /* There is a higher-level page break in a different CSS file, so I need to handle a specific width here when that happens */ @media (max-width: 1200px) { .all-logos { width: 70%; } .all-logos img{ padding-right: 1rem; } } /* There is a higher-level page break in a different CSS file, so I need to handle a specific width here when that happens */ @media (max-width: 991px) { .footer-terms span { width: 48%; padding-left: 10px; } } /* Medium screens - 2 columns layout (2, 3) */ @media (max-width: 1024px) { .grid-container { grid-template-columns: 1fr 1fr; /* Two equal columns */ } .section:nth-child(1), .section:nth-child(2) { grid-column: 1; } .section:nth-child(2){ position: relative; top: -30px; } .section:nth-child(3){ grid-column: 2; grid-row: 1 } .section:nth-child(4){ grid-column: 2; grid-row: 2 } .section:nth-child(5) { grid-column: 2; grid-row: 3; } .footer-bottom{ position: relative; top: -30px; } .all-logos{ display: none; } .roll20-logos{ justify-content: center; } .dice { padding: 0; } } /* Small screens - 1 column, collapsible sections */ @media (max-width: 768px) { .section-title { display: none; } .socials{ display: flex; gap: 1rem; padding-top: 1rem; } .collapsed-section-title{ display: unset; width: 100%; font-weight: 600; } .footer-terms{ flex-direction: column; } .footer-terms span{ display: none; } .footer-content{ display: flex; flex-direction: column; } .grid-container { display: flex; flex-direction: column; align-self: center; width: 85%; padding-left: 0; position: relative; left: -16px; } .homepage-link{ display: unset; } .globalfooter p{ color: var(--color-grayscale1); } .section{ display: flex; align-items: center; justify-content: space-between; width: 100%; flex-direction: column; border-bottom: 1px solid rgba(98, 91, 101, 1); width: 110%; } .section-content a{ color: var(--color-primary-text); font-size: 1rem; } .section:nth-child(2){ top: 0; } .section:nth-child(5) { top: 0; } i { font-weight: 400; } .section-content { display: none; /* Hidden by default */ } .section.active .section-content { display: flex; /* Show content when active */ flex-direction: column; align-items: flex-start; width: 98%; font-size: 1.5rem; padding: 0 0 10px 5px; } .collapsed-section-title::after { content: '+'; float: right; } .collapsed-section-title.active::after { content: '-'; transform: scaleX(1.8); } .footer-bottom{ position: relative; top: 20px; } .powered-by { display: flex; align-items: center; text-align: center; padding: 2rem 0; } .roll20-logos{ padding: 2rem 0; } } </style> <script> // Toggle collapsible sections on small screens document.querySelectorAll('.collapsed-section-title').forEach(section => { section.addEventListener('click', function() { this.classList.toggle('active'); this.parentElement.classList.toggle('active'); }); }); </script> <!-- This is the footer that is shared across all pages --> <script type="text/javascript"> $(function() { var cookieName = 'roll20tempauth'; var cookieValue = Math.floor(Math.random()*100); var myDate = new Date(); myDate.setMonth(myDate.getMonth() + 1); var cookieinfo = cookieName +"=" + cookieValue + ";expires=" + myDate + ";domain=.roll20.net;path=/"; document.cookie = cookieinfo; }); </script> <script id="tmpl_campaigntag" type="text/html"> <div class="tag"><$=this.model.get("tag")$></div> </script> <script id="tmpl_campaigntags" type="text/html"> <div class="tags tagset"> <div class="tagslabel"> <span class="pictos">z</span> Tags: </div> <input> <$ if(this.editable == "true") { $> <div class="add"> <em> <span class="pictos">p</span> Edit Tags </em> </div> <$ } $> </div> <div class="clear"></div> </script> <script id="tmpl_tokentag" type="text/html"> <div class="tag"> <$=this.model.get("tag")$> </div> </script> <script id="tmpl_tokentags" type="text/html"> <div class="tags tagset"> <div class="label"> <span class="pictos">z</span> Global Tags: </div> <input /> <$ if(this.editable == "true") { $> <div class="add"> <em> <span class="pictos">p</span> Edit Tags </em> </div> <$ } $> </div> <div class="clear"></div> </script> <script id="tmpl_yourtag" type="text/html"> <div class="tag"> <$=this.model.get("tag")$> </div> </script> <script id="tmpl_yourtags" type="text/html"> <div class="tags tagset"> <div class="label"> <span class="pictos">z</span> Global Tags: </div> <input /> <$ if(this.editable == "true") { $> <div class="add"> <em> <span class="pictos">p</span> Edit Tags </em> </div> <$ } $> </div> <div class="clear"></div> </script> <script id="tmpl_uploadslot" type="text/html"> <div class="avatar dropbox <$! (this != "" ? "filled" : "empty") $>"> <div class="status"></div> <div class="inner"> <$ if(this == "") { $> <h4 style="padding-bottom: 0px; marigin-bottom: 0px; color: #777;">Drop a File<small>(JPG, PNG, GIF)</small></h4> <div style="margin-top: -5px; margin-bottom: 5px;">or</div> <a href="javascript:void(0);" class="btn btn-info" style="margin-bottom: 10px;">Choose a File...</a> <input class="manual" type="file" /> <$ } else { $> <img src="<$!this$>" /> <div class='remove'><a href='javascript:void(0);'>Change Image</a></div> <$ } $> </div> </div> </script> <script type="text/javascript"> $(function() { setTimeout(function(){ if($(".obs_container").length > 0) { // GA Event Tracking ga('send', { 'hitType': 'event', 'eventCategory': 'obsAdvert', 'eventAction': 'topbar', 'eventLabel': '' }); } }, 0); $(".localtimeme-short").each(function() { let time = parseInt($.trim($(this).text()), 10); let d = new Date(time*1000); $(this).attr("data-timestamp", d.getTime()); let mytimezone = ""; if(d.toLocaleString) { mytimezone = d.toLocaleString('en', {timeZoneName: 'short'}).split(' ').pop(); } const options = { month: 'long', hour:'numeric', minute:'numeric', day: 'numeric', timeZoneName: 'short' }; $(this).text(d.toLocaleDateString('en-EN', options)); }); }); $("#roll20-top .loginform button").on("click", function() { console.log("click"); var $form = $(this).parents("form"); $form.attr("action", $form.attr("action") + "?backto=" + escape(window.location)); $form.submit(); return false; }); $(".topbarnotifications .notification button").on("click", function() { var notid = $(this).attr("data-notification-id"); var othis = this; $.getJSON("https://app.roll20.net/notifications/dismiss/" + notid + "/?callback=?", function(data) { if(notid == "all") { $(othis).parents(".notifications").fadeOut(); $(".alertcount").html(""); $(".topbarnotifications .dropdown-menu").remove(); $(".topbarnotifications.nav-item-messages").html("<a href='https://app.roll20.net/private_message/inbox/' class='nav-link'><i class='fas fa-envelope'></i></a>"); return; } if($(othis).attr("href")) { window.location = "https://app.roll20.net" + $(othis).attr("href"); } else { $(othis).parents(".notification").fadeOut(); var $count = $(othis).parents(".notifications").find("a .count"); var current = parseInt($.trim($count.text()), 10); current = current - 1; if(current < 0) current = 0; $count.text(current); countdown = parseInt($(".alertcount").html(), 10) $(".alertcount").html(countdown - 1); if(countdown < 2) { $(othis).parents(".notifications").fadeOut(); $(".alertcount").html(""); $(".topbarnotifications .dropdown-menu").remove(); $(".topbarnotifications.nav-item-messages").html("<a href='https://app.roll20.net/private_message/inbox/' class='nav-link'><i class='fas fa-envelope'></i></a>"); return; } } }); return false; }); $(".topbarsitenotifications .newalerts").on("click", function() { }); $("#navbar-notifications__see-more-btn").on("click", function() { window.location = "https://app.roll20.net/sitenotifications"; }); $("#menu-mobile-site-alerts").on("click", function(e) { e.preventDefault(); window.location = "https://app.roll20.net/sitenotifications"; }); $("#remove-admin-menu").on("click", function() { $("#menu-adminhalla").remove(); $("ul.dropdown-menu[aria-labelledby='menu-adminhalla']").remove(); $(".logo img").prop("style", ""); }); if(window.dataLayer) { dataLayer.push({ 'event': 'start_pw'}); } </script> <style> .bottom-banner { background-color: #fff; position: fixed; bottom: 40px; z-index: 9999; width: calc(100% - 30px); margin-left: 15px; box-shadow: 0px 0px 16px #888888; display: flex; align-items:center; justify-content: space-around; } .bottom-banner-css-version-v2{ border-left: 15px solid #ec008c; } .bottom-banner-css-version-v3{ border-left: 15px solid #35c8f5; } .bottom-banner-css-version-v2 .bottom-banner__button{ background-color: #35c8f5; } .bottom-banner-css-version-v3 .bottom-banner__button{ background-color: #ec008c; } .bottom-banner--hidden { display:none; } .bottom-banner__message { padding: 1em; float: left; font-size: 12px; line-height: 1.4; } .bottom-banner__dismiss-icon { float: right; padding:10px; color: #d1d1d1; cursor: pointer; align-self: flex-start; } .bottom-banner__dismiss-icon:hover { color: #333333; } .bottom-banner__button, .bottom-banner__button:hover, .bottom-banner__button:visited, .bottom-banner__button:active { float:right; font-size: 16px; line-height: 1.6; border-radius: 4px; padding: 7px 15px 7px 15px; color: #fff !important; transition: all .25s linear; text-decoration: none; } .bottom-banner__button:hover { color: #fff; } .cookie-modal--hidden { display: none; position: fixed; z-index: 10001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; } .cookie-modal-content { background-color: var(--color-surface1); margin: 20% auto; padding: 20px; width: 40%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .cookie-modal-content h3 { display: inline-block; } .cookie-modal-css-version-v3 { padding-top: 16px; } .cookie-modal_switch .switch{ display: inline-block; float: right; margin-top: 30px; width: 60px; } .switch { position: relative; display: inline-block; width: 60px; height: 26px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #8492A6; -webkit-transition: .3s; transition: .3s; } .slider:after { content: "Off"; position: absolute; top: 50%; right: 11px; transform: translateY(-50%); color: #fff; font-family: helvetica; font-weight: bold; font-size: 13px; } .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; -webkit-transition: .3s; transition: .3s; } input:checked + .slider { background-color: #00853C; } input:disabled + .slider { cursor: no-drop; background-color: #C2C7D1; } input:disabled + .slider:before { background-color: #DFE2E7; } input:focus + .slider { box-shadow: 0 0 5px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(33px); -ms-transform: translateX(33px); transform: translateX(33px); } input:checked + .slider:after { content: "On"; right: auto; left: 11px; } /* Rounded sliders */ .slider.round { border-radius: 26px; width: 60px; } .slider.round:before { border-radius: 50%; } .close { float: right; font-size: 20px; font-weight: bold; line-height: 18px; color: var(--color-grayscale1); text-shadow: 0 1px 0 #ffffff; opacity: 0.2; filter: alpha(opacity=20); } .close:hover { color: var(--color-grayscale1); text-decoration: none; opacity: 0.4; filter: alpha(opacity=40); cursor: pointer; } </style> <!--googleoff: all--> <div id="gdpr-notification" class="bottom-banner bottom-banner--hidden bottom-banner-css-version-v3"> <div class="bottom-banner__message"> Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences <a href='#' id='banner-link-preferences'>here</a>. </div> <span class="bottom-banner__dismiss-icon" id="gdpr-notification-dismiss-button" aria-label="Close Cookie Toast" role="button" tabindex="0">×</span> </div> <div id="cookie-modal" class="cookie-modal--hidden"> <!-- Modal content --> <div class="cookie-modal-content cookie-modal-css-version-v3"> <span class="close" id="cookie-modal-dismiss">×</span> <h3>Cookie Preferences</h3> <span class="cookie-modal_switch"> <label class="switch"> <span class="sr-only">Accept cookies</span> <input class="feature_toggle" id="cookie-modal-input" type="checkbox"> <span class="slider round"></span> </span> <hr> We use Cookies to help personalize and improve Roll20. For more information on our use of non-essential Cookies, visit our Privacy Policy <a href=https://roll20.zendesk.com/hc/articles/360037770793-Terms-of-Service-and-Privacy-Policy target='_blank'>here.</a> </div> </div> <!--googleon: all--> <script src="https://www.datadoghq-browser-agent.com/datadog-rum.js" type="text/javascript"> </script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-31040388-1"></script> <script type="text/javascript" nonce=""> // Google analytics function to send events via analytics.js // Remove after everything has been switched to gtag (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); // Google analytics function to send events via gtag.js function gtag(){dataLayer.push(arguments);} initializeOldGoogleAnalytics(); initializeNewGoogleAnalytics(); window['ga-disable-UA-31040388-1'] = true; var gdprCookie = getCookie("gdpr_accepts_cookies"); if (gdprCookie != undefined) { gdprCookie == "true" ? gdprCookie = true : gdprCookie = false; }; var gdprBanner = document.getElementById("gdpr-notification"); var gdprBannerDissmissButton = document.getElementById("gdpr-notification-dismiss-button"); var gdprLoggedIn = false; var gdprAccountAcceptsCookies = null; var cookieModal = document.getElementById("cookie-modal"); var cookieModalClose = document.getElementById("cookie-modal-dismiss"); var cookieModalSwitch = document.getElementById("cookie-modal-input"); var bannerLinkPreferences = document.getElementById("banner-link-preferences"); bannerLinkPreferences.onclick = function () { cookieModal.style.display = 'block'; hideGDPRBanner(); } function setGDPRCookie(value, expirationInDays) { var date = new Date(); date.setTime(date.getTime() + expirationInDays * 24 * 60 * 60 * 1000); //convert to milleseconds var expires = "expires="+ date.toUTCString(); document.cookie = "gdpr_accepts_cookies=" + value + ";" + expires + ";path=/"+ ";domain=.roll20.net"; } function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return undefined; } function checkGdprStatus() { if (gdprLoggedIn == true) { checkAccountGdprCookieSettings(); } else { checkPublicGdprCookieSettings(); } } function checkAccountGdprCookieSettings() { var cookieExists = getCookie("gdpr_accepts_cookies"); switch(cookieExists){ case "true": acceptCookies(); break case "false": denyCookies(); break case undefined: showGDPRBanner(); acceptCookies(); break } } function checkPublicGdprCookieSettings() { console.log('Not logged in - checking cookie GDPR status'); const in_discord = false; if (gdprCookie == undefined) { console.log("No GPDR Cookie Detected"); // If a user is logging in from the discord activity, we want to deny our cookies by default so we don't show the cookie banner. Later, we can figure out a better way to handle instead of denying out of the gate (so we have analytics, for example), but for MVP, this works if(in_discord){ denyCookies(); }else{ showGDPRBanner(); acceptCookies(); } } else if (gdprCookie == true){ console.log("GDPR Cookie Detected"); acceptCookies(); } } // Options object for google analytics based on the current account function getAnalyticsConfigOptions() { return {'cookieDomain': 'auto'} } // Not impacted by GDPR - just connects our account // Remove after everything has been switched to gtag function initializeOldGoogleAnalytics() { ga('create', 'UA-31040388-1', getAnalyticsConfigOptions()); } // Not impacted by GDPR - just connects our account function initializeNewGoogleAnalytics() { window.dataLayer = window.dataLayer || []; gtag('js', new Date()); // Universal analytics gtag('config', 'UA-31040388-1', { ...getAnalyticsConfigOptions(), send_page_view: false }); // Google Analytics 4 gtag('config', 'G-SZLSVQPSWG', { ...getAnalyticsConfigOptions(), send_page_view: false }); } function turnOnGoogleAnalytics() { window['ga-disable-UA-31040388-1'] = false; ga('send', 'pageview'); if(window.dataLayer) { dataLayer.push({'event': 'optedIn'}); } } var showGDPRBanner = function () { gdprBanner.classList.remove("bottom-banner--hidden"); } var hideGDPRBanner = function () { gdprBanner.classList.add("bottom-banner--hidden"); } var updateUserAccount = function(account_id, value) { var xhr = new XMLHttpRequest(); // need to get the below working for marketplace, compendium, landing (only works for app) xhr.open("PATCH", '/accounts/'+account_id, true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); var cookieValue = "account[gdpr_accepts_cookies]=" + value; xhr.send(cookieValue); } var acceptCookies = function () { setGDPRCookie(true, 365); turnOnGoogleAnalytics(); turnOnDataDogRUM(); // hideGDPRBanner(); document.getElementById("cookie-modal-input").checked = true; } var denyCookies = function () { setGDPRCookie(false, 365); } var toggleCookie = function () { var switchChecked = document.getElementById("cookie-modal-input").checked; setGDPRCookie(switchChecked, 365); } var showCookieModal = function (){ cookieModal.style.display = "block"; } var closeCookieModal = function (){ cookieModal.style.display = "none"; } if (gdprCookie == true || gdprAccountAcceptsCookies == true){ document.getElementById("cookie-modal-input").checked = true; } gdprBannerDissmissButton.addEventListener("click", hideGDPRBanner); cookieModalClose.addEventListener("click", closeCookieModal); cookieModalSwitch.addEventListener("click", toggleCookie); checkGdprStatus(); function vttSampleRate() { const sampleRate = 0; if (sampleRate > 5) return sampleRate; return 5; } function experiment({ chatTech }) { const experimentsEnabled =false; return experimentsEnabled && chatTech === 'simple-peer'; } function staging({ hostName }) { return hostName === 'roll20staging.net'; } function ddSampleRate(opts) { if (experiment(opts)) return 100; return staging(opts) ? 100 : vttSampleRate(); } function turnOnDataDogRUM () { var tmplMeta = { chatTech: '', hostName: 'roll20.net', version: '25.3.20.3', }; var sampleRate = ddSampleRate(tmplMeta); window.DD_RUM && window.DD_RUM.init({ applicationId: '95ddf222-5b92-4a62-803a-185cdd723c8b', clientToken: 'pub3fb1f7cf273c5d345be974e50be0dfda', site: 'datadoghq.com', service:'d20app', sampleRate, trackInteractions: true, version: tmplMeta.version, }); } </script> <script type="text/javascript"> // Sets a browser cookie, but only allows true or false flags function setCookie(name, value, expirationInDays) { let date = new Date(); date.setTime(date.getTime() + expirationInDays * 24 * 60 * 60 * 1000); //convert to milleseconds const expires = `expires=${date.toUTCString()}`; if (value == true || value == false) { document.cookie = `${name}=${value};${expires};path=/;domain=.roll20.net`; } else if (name == "subscriptionGiftPurchaseInfo"){ // it is a gift subscription and we need some actual values let amount = value.substring( value.indexOf("=") + 1, value.lastIndexOf("|") ) let giftToId = value.split('|giftToId=')[1]; document.cookie = `subscriptionGiftPurchaseInfo=true|amount=${amount*100}|giftToId=${giftToId};${expires};path=/;domain=.roll20.net`; }else { return undefined; } } // Gets a browser cookie value function getCookie(cname) { let name = cname + '='; let ca = document.cookie.split(';'); for(let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return undefined; } function checkCookieFlag(name) { let flag = getCookie(name); if (flag != undefined) { flag == 'true' ? flag = true : flag = false; } return flag; } </script> </body> </html>