Information


In order to provide a seamless experience to customers while enabling resellers to fully customize their theme, Spotify.gg has a list of requirements to have a custom theme.


All themes, no matter the origin, will share a single Javascript file to handle API requests for upgrading, replacing, and registering, to ensure the security of our private backend API. 



Requirements


Firstly, all third party files (CSS, javascript, images) must use an EXTERNAL CDN service as we will not host your files for security reasons. You can use Imgur for images, then any free CDN system for your other files. 


Next, all pages that require API access (upgrade, register, replace) will need to include specific IDs on inputs and buttons that have any data that our API needs to access. Below I will list every page, and what each form needs to include.


upgrade.html

IDTypeReason
resParagraph/TextThis will display the result of the upgrading process. 
upgrade-spotify-emailText InputEmail to Upgrade
upgrade-purchase-keyText InputPurchase Key
upgrade-countrySelect InputCountry Dropdown
upgrade-btnButtonButton to Start Upgrading


replacements.html

IDTypeReason
resParagraph/TextThis will display the result of the replacement process. 
replace-spotify-emailText InputEmail to Replace
replace-btnButtonButton to Start Replacing



register.html

IDTypeReason
resParagraph/TextThis will display the result of the registration process. 
register-purchase-keyText InputKey to Create Account For
register-btnButtonButton to Start Registering



All these pages also need to include the following HTML snipped at the bottom of the page to allow us to connect to these inputs:

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="https://d16xszn0mefh4p.cloudfront.net/bundle.js"></script>
<script src="https://d16xszn0mefh4p.cloudfront.net/socket.js"></script>


CMS

If you want to edit your source inline with our CMS system, you need to add the class "cms-editable" to every text element you want to be able to edit, and each element with this class needs a unique id for its element. Example:

<div class="content">
 <p id="unique-id1" class="cms-editable"> I want to edit this content </p>
<p id="unique-id2" class="cms-editable"> I also want to edit this content </p>
<p> I won't be able to edit this content </p>
</div>

Do NOT add cms-editable to the body tag, or any tag that doesn't DIRECTLY host content. It needs to be at the lowest level possible to prevent errors when editing. 


Installation

Once you have created four files with the above requirements (index.html, upgrade.html, replacements.html, register.html), you can send your files to Matt on Discord. Just send him the 4 files individually, no ZIP file.