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.
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.
|res||Paragraph/Text||This will display the result of the upgrading process.|
|upgrade-spotify-email||Text Input||Email to Upgrade|
|upgrade-purchase-key||Text Input||Purchase Key|
|upgrade-country||Select Input||Country Dropdown|
|upgrade-btn||Button||Button to Start Upgrading|
|res||Paragraph/Text||This will display the result of the replacement process.|
|replace-spotify-email||Text Input||Email to Replace|
|replace-btn||Button||Button to Start Replacing|
|res||Paragraph/Text||This will display the result of the registration process.|
|register-purchase-key||Text Input||Key to Create Account For|
|register-btn||Button||Button 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>
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.
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.