Copywriting
      Back to home
      1. Knowledge Base
      2. Onboarding
      3. Copywriting

      Portal Program Overview Page Tool

      This will be what is displayed in the third tab within your brand's portal.

       

      This page is exclusively for uploading a Program Overview Page built on Duel. If you don't want to use this tool, you can also ask Duel what format the HTML file needs to be in for upload.

      ☑️ Accessing the Tool

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

      We recommend you start with a template or a draft that Duel has created for your brand.

      ☑️ 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 download 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 uploadto upload/import the JSON file. 

       

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

      Screen_Shot_2020-02-04_at_16.46.45 (1)

       

      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:

      Screen_Shot_2020-08-26_at_14.58.07

      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

      Screen_Shot_2020-08-26_at_15.05.20

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