Meeting Mojo Support

Need to visit a specific topic? Jump to:

Arranging pages on the menu bar

About the Toolbar

Adding new pages

Change text on an existing page

Adding an image to a page

Adding a sitewide banner

Page Fragments

Add Images/Text Above Attendee Schedules

Add a Footer to each Page 

Advanced

Direct to another website using a menu button

Create a hidden page

Add hyperlinks to text or images

HTML notes and templates

Want to use CSS (Cascading Style Sheets) to customise your website even further? Visit this article.

Before you start:

• Required: Go to the Content tab and activate your pages by clicking the blue Activate button. If you do not activate the pages, you cannot edit or add any new pages.

• Prepare the texts and images you want to display, saving them on your computer or server. Images are recommended to be saved as .jpg or .png formats. 

• Before changing any content, copy and store the original so you can paste it back in if things go wrong.

• If possible, either type in text or copy and paste from plaintext files (.txt) rather than formatted word processor files, which can introduce undesirable fonts or formatting.

• To view your new pages and edits, open the main website (the ‘frontend’) by clicking ‘Website’ in the blue banner at the top of the Admin page. Refresh pages to view new edits.

• Top menu bar pages (except for Home) are not customisable, save for a banner and text you can place above.
• You cannot create forms through editing the pages. To create a registration form, visit this article.

Arrange the links to your Menu pages

Your attendees will access your menu pages via the lower menu bar on the website. Once you have activated your pages on the Content tab, or added new ones, make sure their menu items appear in the desired order by clicking the up/down arrows to promote/demote menu pages.

About the Toolbar

Confused about what one button or all the buttons do on the toolbar? Read this section for a detailed explanation on how to use them. This section will cover the buttons in a left-to-right order.

Undo/Redo

As the name suggests, these buttons will undo or redo your actions. Click the button on the left that also points left to undo an action. Click the button on the right that also points right to redo an action, helpful if you accidentally click undo. Undo can also be done by pressing Ctrl+Z or ⌘+Z on your keyboard, depending on your operating system. Redo can also be done by pressing Ctrl+Y or ⌘+Y/⌘+Shift+Z on your keyboard, depending on your operating system.

Formatting

This option allows for easy text formatting, especially helpful if you are not fluent in HTML. Clicking this button will present you with a series of choices. View the image below for a visual representation of how each option will format your text.
 

Adding new pages

1. Open the Content tab and click ‘New (language) page’ at the bottom of the page.

2. Add the page title and menu title in the first two fields. These will be displayed on the frontend, at the top of the page and on the menu, respectively.

3. Add a one-word description in the ‘Slug’ field. For example, if you entered 'rickastley', the URL for this page would be 'event.com/rickastley'.

4. If you would like the page to be shown to the public in the menu, choose 'Yes, in menu'. Otherwise, choose 'No, hidden'.

5. To publish the page as soon as it is saved, check the 'Published' box.

6. To only allow logged in delegates to view the page, check the 'Private' box.

7. Finally, type in or paste the information you would like to be displayed on this page in the 'Content' box.

8. Click the blue Save button when you are done, then click 'Website' at the top of the screen to see what your new page looks like. If you are updating an existing page, refresh the page after saving to see the updated contents.

Longer titles will wrap into two or more lines. To tidy up, insert <br> to create line breaks where you want them. View the Advanced section below to see how else you can customise your event pages. If you would like to add certain elements such as a phone number or the site name, use the elements found on the right while editing a page. Make sure these details have already been entered in the Setup tab.

Change text on an existing page

1. Navigate to the Content tab, clicking the page you would like to edit. If you are not sure which is the right page, look at the Menu title and compare it to the menu bar on the website.

2. Use the 'Content' field to edit the text and other elements that currently appear on the page.

3. Click Save, then click 'Website' at the top of the screen to view your newly edited page. If you already have the page open in another tab, refresh it to see your changes.

Some pages contain coded ‘elements’ such as [[SITE_NAME]]. These are found on the right while editing a page. They take information from the Settings area and display it within website content. By changing these settings you can instantly update information such as a contact phone number across the whole website. You can add the coded elements to new content so that it is always up to date.

Add an image

1. Add all the images you want to display into the Media Library as follows:

   - On the Content tab, click ‘Media’ in the upper right menu.
   - Click 'Choose file' under the Upload a file heading. Find your image and double click on it.
   - Click ‘Save’ under the 'Choose file' button.
   - Repeat for all images.

Our webpages are 700 pixels wide, and images should be 300px wide or less so as to fit on smartphone screens.

2. Right click 'Pages' in the upper right menu and open it in a new tab, then click the page you wish to edit.

3. In the previous tab with your media library open, click on the image you would like to add and copy the URL seen at the top of your web browser. It should look similar to this: 'eventwebsite.com/uploads/1234/image.png'.

4. Go back to your page editor and click the image insert button. (right)

5. Paste the URL you just copied in the 'URL' field.

6. (Optional) add alt text into the 'Description' field.

7. Click Confirm when done. To position your image on the page or change the size, visit the Advanced section below.

Images can also be saved on other image hosting websites, as long as it is stored for the duration of your event. Meeting Mojo cannot be held responsible for problems implementing images from these websites.

Add a banner to your website

1. Navigate to the Content tab and choose 'Media' in the upper right menu.

2. Click 'Choose file' on the left.

3. Find your desired banner image and double click on it.

4. Click Save under the 'Choose file' button.

The banner must be no more than 1170 pixels wide. .jpg, .png and .gif files are supported.

2. Click 'Pages' in the upper right menu, then click the text box under the 'Banner image' heading on the right.

3. The Media Library will launch in a pop-up window. Your web browser may ask you to authorize this action.

4. Click the banner image thumbnail. You will be returned to the Content tab.

5. Click Update under the Banner image field.

6. Now click ‘Website’ in the breadcrumb trail at the top of the page to check the appearance of your banner on the user interface.

If you would like to add an image hosted on another website, close the media library pop up window and paste the URL into the text box. Meeting Mojo cannot be held responsible for problems implementing images hosted on other websites.

Page Fragments

These 'fragments' can be found under the 'Pages Fragments' heading on the Content tab. They are not full pages like the others, only small customisable sections. There are currently two fragments available to customise, one found at the top of the Schedule page and the other found as a footer on each page of your website. View below for how to customise each and for an example of what they could look like.

Add Images/Text Above Attendee Schedules

This is the only element of the attendee schedules you can freely customise (other than blocking out time slots). You may want to incorporate your banner sitewide, or a slogan that reflects the event. Note that anything you enter here will also appear on PDF prints. Here is an example of an image and text set to appear on the Schedule page:

Top: Schedule v1, Bottom: Schedule v2

1. Navigate to the Content tab.
2. If you skipped straight to this section, you may see a blue 'Activate' button. Click it to allow editing.
3. Scroll down to the 'Pages fragments' heading. You will see two pages listed here.
4. Choose 'Meeting Schedule for [[ATTENDEE_AND_ORGANISATION]]'.
5. If you have edited other pages, this interface will be familiar to you. However, the Title and Menu Title can be left alone as they will not be visible to attendees.
6. Type or paste the data you would like to appear above schedules into the Content text box. If you are adding HTML code, ensure you have clicked the '<>' icon first to enter mark up mode. View this section for more details.
7. When done, click Save at the bottom of the page. Click 'Website' at the top of the page then navigate to your Schedule page to view your changes.

Add a Footer Block to Each Page

The footer fragment is found at the bottom of each page on your website and can be used for displaying sponsors, a simple banner or text about the event. Unlike the banner found at the top of the page, the footer supports hyperlinks and the ability to easily remove one element at a time. Here is an example of what your footer could look like:

1. Navigate to the Content tab. 
2. If you skipped to this section, you may see a blue Activate button. Click it to enable editing.
   
3. Scroll down to the 'Pages fragments' heading and click 'Footer Block'.
4. if you have edited a page before, this interface will be familiar to you. However, this time the Title and Menu Title fields can be left alone, as neither are visible to attendees.
5. Type or paste in the data you wish to appear in the footer. If you are entering HTML code, ensure you have clicked the '<>' icon first to enter mark up mode. View this section for more details.
6. It is highly recommended you add a horizontal line at the top of the footer to separate it from the rest of the page. You can do this by clicking the corresponding icon:
7. Once done, click Save at the bottom of the page. Click 'Website' at the top of the page then scroll to the bottom of any page on your website to view the footer block.

Advanced

Redirect a menu item to another website

1. Open the Content tab and click the page you want to change, or create a new page (see 1., above).

2. Paste the URL of the destination webpage into the ‘Redirect url’ field.

3. Click Save.
   NOTE: ensure that Menu title, Slug and Position fields are filled, and the Published checkbox is checked. Title and Content are not required for redirected pages.

Create a hidden page
Follow the instructions below to create a page that is not listed in the menu bar. ‘Hidden pages’ can be accessed via hyperlinks from other pages, websites or from emails. Anyone that knows the exact URL of this page can visit it at any time unless unpublished.

1. Create the page as described in this section.

2. From the two options in 'Show In Menu' choose 'No, Hidden'. The page menu title can be left blank.

3. Add content and click Save.

Hyperlinks
Link text and images to locations within your Meeting Mojo website, or to other locations such as your conference website. 

1. Open the Content tab and click the page you want to change.

2. Highlight the text or click on the image you want to hyperlink. 

3. Click the hyperlink icon in the content editor toolbar, then click 'Insert link'.

4. Paste the link into the 'URL' field.

5. Leave the 'Text' field as it is if you are just linking already highlighted text. Otherwise, change the display text here.

6. Alternate text can be entered into the 'Title' field. This text will display when the link is hovered over.

7. Once you're done, Click Confirm. If you are done editing the page, click Save as well.

8. To test your hyperlink, click Website at the top of the page and navigate to your edited page. If you are editing while the event is happening, it is highly recommended to keep it unpublished until it is in a finished state.

HTML Editing Notes

The Meeting Mojo content manager is packaged with a simple HTML editor that can be used to apply design elements to your webpages. We strongly recommend use of a reputable HTML IDE to create your code before pasting into your page.

1. Open the Content tab. Either click the page you would like to edit or view this section for creating a new one.

2. In the Content field, click the <> sign to open the HTML view.

3. Type or paste in your HTML code. If you already know what you're doing, you can view the section below for some helpful templates. Otherwise, view this section to learn how to add images.

4. Click the <> icon again to go back to the front end 'pretty' view. This is what the page will look like to everyone in your event.

5. Once finished, click Save at the bottom of the page. To test your code, click Website at the top of the page and navigate to your HTML-embedded page.

HTML Templates

Horizontal lines will be used to split each template for easier reading. If you are using images from other image hosting websites, ignore the text that tells you to paste the image link from your media library. Before pasting any code, the <> HTML view icon should be selected otherwise the code will appear as plain text on the page.

Format text, or text and images into 2 columns

<div style="float: left; margin: 0px 0px 0px 40px;">
<p><strong>List </strong> </p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div style="float: left; margin: 0px 0px 0px 40px;">
<p><strong>Image</strong></p>
<img src="[imageURL]" />
</div>
<div style="clear: both;"></div>
<hr />

Sponsor profile 

A hyperlinked logo with heading and short text profile

<hr size="1" />
<div style="margin: 10px 20px 10px 10px; float: left;">
<a href="[webURL]" target="_blank">
<img src="[imageURL]" /></a></div>
<h3>Sponsor 2</h3>
<p>Sponsor profile</p>
</div>
<div style="clear: both;"></div>
<hr size="1" />

Place a series of hyperlinked images in the Footer
For each image, paste the following code into the html editor:

<div style="float: left; margin: 0px 0px 0px 40px;">
<a href="[imageURL]" /></a>
</div>

Enter this code at the end (of the entire code, not for each image individually):

<div style="clear: both;">&nbsp;</div>

[imageURL] - replace with image link location from Media Library. Go to the Content tab, then the Media link on the right, click on the picture you'd like to use, then copy the URL from the top of the page.