Adding JavaScript code to WordPress websites
Overview
The MagManager directory lets you display a ready-made directory of your advertisers directly on your business website.
By default, MagManager will pick up all advertisers in your current publications, and will update on the 1st of the month. You can choose whether some of your clients are always included or never included on the directory. When you update client details in MagManager, these immediately show in the directory.
Each of the clients you include will be displayed as a business card containing their contact details. You can also add a short piece of text and a logo if you choose. Visitors to your website can click on icons that take them straight to your client’s website or social media pages.
You can customise the appearance of the directory to match your branding. Your clients will be organised by sections (or categories) and website visitors click on the section title to view the advertisers in that section. These screenshots show how your directory might look- visit www.thevoicemagazines.co.uk/directory to see this directory live.
Example 1: Directory with location options
Example 2: Directory with description and logos
If you have website or social media details entered on the client record, these will show with an icon link that will take visitors directly there- the client’s website will open in a new browser tab.
Additional text descriptions and logos can be added from Manage Listing, accessed from the details tab of the client record - See the section Display Settings For Clients below.
Customising The Directory
Click on the Gear Icon, top right of the screen > Under the Settings heading select Web Directory >Here you will find two tabs, the Preview Directory tab and the Select Adverts tab.
Preview Directory tab
The first tab is the place to find the code you need to give to your website developer, so they can display the directory on your website. This code depends on the selections you make using the drop-down menus, they provide options to how your directory is displayed (as described below). You can also customise your directory using your own brand styles. When you have chosen from the drop-down menus, you will see a preview of your directory.
With knowledge of CSS additional styling can be added to the Other Styles box.
Copying your code
Choose the settings you want in the “Style” and “Publication Choice” drop-down boxes > Click Apply Styles and then copy the JavaScript code in the blue box. If required your website developer can insert this on your website, replacing Element Id 'mmdir' with the id of the element they want the directory to load into (for example, <div id=”my_directory”></div>).
NOTE: You only have to set the options for your code once: choosing the month in the “Select a month to preview” dropdown menu is just for the purposes of letting you preview your directory.
NOTE: It isn’t possible to simply add JavaScript to a page or post in WordPress; the code needs to be added to a Custom HTML block see example below or see the Appendix for notes on adding JavaScript to a WordPress website.
Open the page you want to add the web directory to > Click the + sign to add a block > Search for Custom HTML and select it.
The custom HTML block will appear > Copy and paste the code into the block > Add any SEO settings > Click Update
Display options
From the Preview Directory tab, drop-down menus allow you to select the following:
- Section and category styles from the Styles drop-down
- Whether to include a publication filter from the Publication Choice drop-down
- A choice of month to preview
Section and category style options
You can choose whether to organise your clients by their MagManager “Sections”, “Sub Categories” or by Sections and Sub Categories (in MagManager Categories are sub-divisions of Sections). You might want to tidy your sections a bit, to ensure you don’t have too many sections with similar names, for example.
Here the “Sections and Sub Categories” option was selected, so clients are organised in the form Section / Category.
Publication Choice options
You can choose to let visitors to the directory filter for advertisers in a single area based on your different publications. The default here is “none”. You can choose to display a list of your publications either as badges or a drop-down list.
The screenshot below shows a directory with the individual publications showing as badges:
Alternatively, you can choose to display a dropdown list for your areas:
Month preview options
By selecting a month from the drop-down menu, you can preview your directory for the month of your choice. The directory will by default show advertisers in your current issues and will be updated on the first day of the month of your new publication. So, if you have bi-monthly editions for October/November and December/January, the directory will be updated on 1st October and again on 1st December.
Customising the directory with your own branding
Click on the Gear Icon, top right of the screen > Under the Settings heading select Web Directory, and you will see options for adding your branding. You can enter the colours you want for the text and the background in the section headers of the directory. These should be entered as html hex codes. You can also enter html font styles. There is a box headed “Other Styles” where you can enter more css code.
Selecting advertisers based on advert size
If you want to restrict which advertisers are included in your directory based on their advert size. Click on the Gear Icon, top right of the screen > Under the Settings heading select Web Directory and choose the Select Adverts tab.
You can use the toggles next to each listed advert size to select which advertisers to include. (The list includes all advert sizes available in MagManager: not all of these will be relevant to you).
Display settings for clients
Client details can be updated directly from the directory settings in MagManager or from the Manage Listing page within the client record.
Editing your clients’ details straight from the directory
From the Preview Directory screen (Gear Icon > Settings -Web Directory > Preview Directory Tab), when you select display options and a preview month, you will see a preview of your directory. You can click on the details of any of your clients from here and you will be taken directly to the Details tab for that client in MagManager, where you can make any amendments. As soon as you click “update” in MagManager and refresh the page on your website, the changes will show in the online directory.
‘Manage listing” for an individual client
On the Details tab for an individual client, click the “Manage Listing” button which is found under the Web & Social section. This opens the “Edit listing” box, which gives you various options about how your listing for that client will display. You can optionally add extra text and small images to the listing and format it using the button on the editor toolabar. Clicking the </> button allows you to edit the html code.
TIP: For best results, upload images you want to use as small files of around 100px for a square image, or a maximum of 220px wide for a rectangular image. Ensure it's an image file (JPG/PNG) and not a PDF.
Address, Telephone and Mobile options
You may have personal address and telephone numbers for some of your clients which should not be displayed in the directory. Or, the address you have in MagManager might be the headquarters address you use for invoices, rather than the local business address. You can choose hide address, telephone or mobile fields for an individual client by toggling the appropriate switches. You can enter a different telephone number in the “Contact Number” box. (If you leave this field blank the default phone number will show up, unless you have the telephone switches toggled off).
TIP: If you want none of your mobile phone numbers to show in the directory, you can hide all of them by entering the following css code to the “Other Styles” text-box in the Web Directory Preview page:
.companymob { display:none; }
Listing
Here you can add additional details about the client.
The is a character limit of 2000 which includes, newlines, tabs and spaces. Also avoid the use of "Quotation Marks" as it's a copy and paste on a mac.
Using the “always include” and “never include” switches
By default, all the advertisers in the current issue of your publications will be included in the directory, so from 1st September, advertisers in your September issue will be included, and this will change on the first day of the month of your next issue.
You can use the Directory Preview (described above) to see which clients will display in a given month. If you want a client to always be in the directory regardless of whether they are currently advertising, or if you never want a particular client included, you will find the appropriate switches in the Edit Listing box.
Premium Listings
Premium listing appear at the top of the directory.
To add a premium listing you need to create a miscellaneous sale item > From the main settings page > Under Publications & Booking > Select Miscellaneous Sales Items > Click New Item > Enter a Name > Enter a default price (optional) > Select Web Listing > Premium Web Listing will appear, select that too > Click Save.
Full details on miscellaneous sales items can be found here.
A miscellaneous booking needs to be made for the Premium Web Listing. Open the client record > Select Bookings tab > Select Miscellaneous tab > Click to book against Miscellaneous & the issue/month > Click Create Booking.
Select your Premium Web Listing option from the dropdown > Add a description if required > Add or update the price > Save Booking.
Note: Even if you are not charging for the premium listing, a zero value booking would need to be made in order for it to show up in the online web directory. The web directory is updated on the 1st of each month, provding the client has a booking for that month they will appear.
Appendix
Adding JavaScript code to WordPress websites
WordPresss is designed to separate code from content, so you will need to ask your website developer to add the JavaScript for the directory to the files of your website.
However, if you have some knowledge of how WordPress works, you could install a plugin to enable the scripts, as described in this article:
https://wordpress.com/go/website-building/how-to-properly-add-javascript-to-wordpress-3-top-methods/
Using an iframe instead of JavaScript
Alternatively, you might like to insert the directory using an iframe, which you can enter into a page in WordPress.
To access the code - Click on the Gear Icon, top right of the screen > Under the Settings heading select Web Directory >On the Preview Directory tab > find your unique api from the code in the blue box containing the javascript- it is a long string of letters and numbers inside quotes next to getMMDirectory.
You can then use the following html code, replacing your-key with the your unique api key.
<iframe src="https://www.magmanager.co.uk/service/webdirectory?apikey=your-key" width = 100% height = 800px allowfullscreen="" frameborder="0"></iframe>
If you want to add a filter for your publications, add:
your-key&publications=true
If you want to add a filter for your publications with badges rather than a dropdown menu, add:
your-key&publications=true&badges=true
By default, your advertisers will be arranged by section. To arrange advertisers by Category instead, add: your-key&type=2
To arrange advertisers by Section/Category, add:
your-key&type=3
If you want to organise by Category and use the publications filter, add:
your-key&type=2&publications=true&badges=true
Trouble Shooting:
Q - The directory is not displaying on my website
A - If you have copied the code into your website and the directory is not displaying. It's likely that you need to install JQuery, you will need to refer to your web host for instructions on how to do this.
Q - Clients with a specific advert size are not appearing in the web directory.
A - The advert size is likely to be switched off. Go to the main settings page > Under Settings > Select Web Directory > Click the Select Adverts tab > Locate the advert size, the toggle switch will be grey (off), click to turn it on (green).
Q- The headers appear but the clients are not pulling through.
A - Take the first heading Aeriel Installers - If you right-click Aerial Installers and inspect element - you will see bookingcontainers with the advertisers in there. So MagManager is providing the data but your website is blocking it.
The solution is you need to add JQuery to your site. Refer to your website host for more details:
Square Space - https://forum.squarespace.com/topic/10581-how-can-i-add-jquery-to-my-site/
Q- Will this work with a Square Space Website?
A - As of February 2022 it will not work with their basic plan. A user has advised us that Square Space now require you to upgrade the plan.
They may be blocking the use of external scripts. However they definitely allow javascript as standard. Below is a link to the javascript code
https://www.magmanager.co.uk/Scripts/webdirectory.js
Q- How does the search work
A - The search words are picked up from the word being in any part of the client record pulled through from MagManager to the web directory, so that includes, the client name, address, the additional text added in the editor and the section name.
0 Comments