Portal Program Overview Page Tool

Use this page only to upload a Program Overview Page built on Duel. If you prefer not to use this tool, you can also contact Duel to confirm the required HTML format for upload.

This tool is deprecated, but we’re keeping this page available for reference.

☑️ Accessing the Tool

Please open the tool here. As default, there will be no website within the program overview builder.

☑️ How to Upload Templates & Designs

Step 1 - The files are saved in a format called a JSON file.

The platform doesn't save automatically, so make sure to save your draft often by pressing the download button to save the JSON.

Step 2 - In order to upload a template please download one of our previously made JSON templates below:

Step 3 - Then press the upload button to upload/import the JSON file.

The template version will appear in the preview area of the portal:

Step 4 - Edit the page as you see fit, and send Duel both the HTML and the JSON versions of your finished file for their records.

Ideally, brands will host their own HTML, but Duel is able to do so if this is impossible.

☑️ Uploading the Program Overview Page

Starting Out

After having created an overview page you are happy with within the Duel Program Overview Page builder.

Downloading your Page

Download the HTML and CSS from the Program Overview Page builder. You can do this by pressing this button:

Unzip the downloaded file and open the file named 'index.html'. Check that the page appears as you wish it to appear.

Combining the CSS with HTML for Upload

The Duel upload requires the CSS and index.html files to be merged. Open the index.html file in a text editor.

Find the header section at the top of the page. This is demarked by two tags.

<head> </head>

Remove the reference to the external CSS within the header section by deleting the following:

<link rel="stylesheet" href="./css/style.css">

Then add in the following to the bottom of the header section:

<style type="text/css">
[insert CSS here]
</style>

Open the CSS file in a text editor. Copy and paste the entire CSS file where it says [insert CSS here] above. Save your changes.

Upload to Duel

You can upload the saved new index.html file in the portal.

💻 Navigate to Members > Group profiles > Choose relevant group > Overview Page

You can then upload the index.html file under Overview HTML

🚨 Make sure to press preview and confirm the file works before pressing upload.