How to: Create custom pages

Custom Pages are blank pages designed to create any type of content (T&Cs, FAQs, Guide on How to use the community, etc…) that we cannot create on any other channels/sections on the platform, only from the admin.

Types of custom pages

A custom page must not be mistaken with a channel/group, as no interaction can be made on this page type. Their purpose is to host and present information and make it accessible on the community.

These are the types of pages you can create with a custom page:

  • A welcome page that explains how to use the community
  • Terms of Use
  • Community Guidelines
  • Privacy Policy
  • Competition T&Cs
  • FAQs
  • iFrames… etc.

How does it look

172.png      

173.png

174.png

175.png

176.png

 

Create your custom page

There are two options:

Option 1

TokyWoky can create custom pages for you, if they are complex pages, such as:

  • FAQs
  • Fully designed landing pages

Mastering HTML/CSS/JS will be necessary to create and modify any of the Custom Pages listed above. TokyWoky will be able to create & edit those pages for you.

Option 2

For easy pages only involving text, such as:

  • Terms of Use
  • Community Guidelines
  • Privacy Policy
  • Competition T&Cs… etc.

Please follow the steps below:

  • First, make sure you have your document on Word or Google Docs.
  • Work on the layout of your document the way you want it to appear on the community:
    Adjust the font size & color (if the platform has a custom font, you will need to download the font and install it on your computer).
    Arial, Calibri, Helvetica, Open Sans, Roboto will work fine, so you don’t have to install new fonts if you have any of them.

👉 If you need to install a new font, please follow the steps below. If not, you can skip this part.

  • Download the font in .oft format
  • Double-click on the file
  • Click on “Install”
  • The font will be ready to use on Word/Google Doc software
  • Restart the Word/Google Doc software

177.png

178.png

  • Adjust the line spacing (so that the text and paragraphs are homogeneous)
  • Make sure that the page does not have a white background but a transparent one
  • Style the text in bold/italic
  • Make the text color uniform
  • Put color on the links
  • Add borders, edging if needed

👉 On Word, click ‘File’, then ‘Save As’ and save the document in .html format
👉 On Google Doc, you can export the document in .html format

179.png

  • Open the file to access the code:

The easiest way is to right-click on your file and select ‘notepad’, this will look like this below.

180.png

  • You can also open it from a web browser:
    When the page opens, right-click anywhere on the page
    Choose “Inspect” at the bottom of the list

181.png

  • The Dev Tools will open; now you are on the tab “Elements”
  • Right-click on the code line that starts with “<html lang ..
  • Choose “Edit as HTML”

182.png

  • Press Ctrl + A on your keyboard to select all the code.
  • Then, press Ctrl + C to copy it.
  • Go to Admin → Rocket → Custom Pages → Add a Custom Page on the top right corner.
  • Give your page a title.
  • Then, click on “Source”

183.png

  • Paste the code

184.png

  • On your keyboard, press Ctrl + F, search for a:link in the page.
  • Add .WordSection1 in front of a:link and a:visited to avoid all the links on the platform from being underlined.

185.png

  • You can now click Save and publish the custom page.

How to add images in your custom page?

If you have one or more images in the custom page, you will have to host them online.

To do this, go to the "Images" tab (Settings > Look & feel), and drag your image files here (👉 only JPG and PNG formats are accepted. If you have the image in other formats, you will be able to convert them into the right format here for example https://convertio.co/fr/).

 

186.png

  • Copy the image URL

187.png

  • Go to your source custom page, do a CTRL + F and find the name of the image file that was on your computer. If your file on the computer was named "Community banner.jpg" when you saved it, look for "banner.jpg" because the space and other special characters are translated differently in the code so you won't find it if you write "Community banner.jpg”
  • Replace the name of the file in the brackets, by the image URL you just copied (it will normally be written as this: src="Community%20banner.jpg"), the image will be the size of what you have set in Word (the document)
  • Then click ‘Save’.
  • Repeat the process if you have several images

You can also watch this 7 minutes tutorial about how to build a custom page

The link of your custom page

From the custom page list of admin, click on “Copy URL”:

188.png

Where to link a custom page

This a non-exhaustive list but you can link it:

  • At the bottom of the menu
  • In the description of a channel
  • In the description of a poster
  • In the T&C section of a contest
  • In the pop-up of the T&Cs of a contest
  • In the redirection of a Home Card
  • Where there is V-HTML (wordings that accept HTML tags, it's rare but don't hesitate to ask us if it's possible in x place)

Link a Custom Page down the Menu

  • Go to the "Admin V2 > “Config”
  • Then in “Channels” tab
  • Scroll down to see the section “Menu Links”
  • Click on “Add a Link”; you will be able to add the name of the link and paste the corresponding URL

189.png

190.png

Link a Custom Page to a Competition

  1. Go to the contests tab
  2. Click on "Edit" the contest
  3. In the "T&Cs" section, write a wording, example: "Contest rules".
  4. Select the part of the wording that will be clickable, and click on the link creation button in the WYSIWYG (see screenshot below)
  5. Paste the T&C’s custom page URL
    191.png
  6. Select how the custom page will be displayed
    192.png

Link a Custom Page in the instruction of a poster

  1. Go to “Config” > “Channels”
  2. Click on “Edit” on the channel of your choice
  3. Scroll down to the “Poster steps configuration” section
  4. In the "Header" section, write a wording, example: "there".
    193.png
  5. Select the part of the wording that will be clickable, and click on the link creation button in the WYSIWYG (see screenshot below)
    193.png
  6. Select how the custom page will be displayed
    193.png

Was this article helpful?
0 out of 0 found this helpful