In this article, we’ll walk you through how to configure text which appears on iframes using Wikitext.
iframes are just one of the integration tools you can use to integrate your website with Spektrix. It’s possible you may use iframes for a part of, or all of, your online journey.
Adding and editing text and content, such as images, using Website Content and Custom Website Messages is one of the ways which you can configure iframes. You can add and edit text using Wikitext.
Before getting started, we recommend you take a look at the following articles:
TIP: You can use the iframes Content Tool to identify which parts of your iframes can be edited and which cannot be changed.
What is Wikitext?
Wikitext is a markup language or code which means you can give instructions on how to display certain elements or information on your iframes. You can use it to add extra information or images alongside different items.
Wikitext is used in two places in Spektrix: Website Content and Custom Website Messages.
Website Content can be added when setting up the following items:
Custom Website Messages can be found in the Settings Interface and added to different iframes.
TIP: If you use CSS Styling for iframes then this will also be applied to the Wikitext on any of the items which appear on your website as iframes.
How to use Wikitext markup
When setting up an item (such as an Event or Merchandise) which uses Website Content or when you add additional information via Custom Website Messages, you can apply Wikitext to add text and visual elements.
When you are prompted to enter Website Content, the Wikitext Formatting help box will display on the right.
To add Wikitext, choose what you would like from the menu and copy the codes exactly into the Website Content box.
REMINDER: In this example, we’re looking at Website Content during Event Set Up, but you can apply Wikitext in the same way to any of the items mentioned above.
TIP: When adding Custom Website Messages, the Wikitext Formatting help box will not display, however, the same Wikitext rules apply.
Wikitext and HTML
Wikitext markup is automatically converted to HTML so that it can be displayed on your website. If you’re familiar with HTML, it might be helpful to understand the conversion between Wikitext and HTML.
Below we’ve included a list of all of the available Wikitext, the generated HTML and an example of how this displays on an iframe.
REMINDER: Your Wikitext will look different depending on your CSS styling. The below image corresponds to the above Wikitext / HTML styling but without any CSS applied.
| Wikitext | Generated HTML | Visual |
| +Main title | <h1>Main title</h1> | |
| ++Subtitle | <h2>Subtitle</h2> | |
| *Bold text* | <span class="BoldText">Bold text</span> | |
| /Italic text/ | <span class="ItalicText">Italic text</span> | |
| /*Bold italic*/ | <span class="ItalicText"><span class="BoldText">Bold italic</span></span> | |
| _Underlined_ | <span class="UnderlineText">Underlined</span> | |
|
-first item -second item etc |
<ul><li>first item</li><li>second item etc</li></ul> | |
|
-1first item -1second item etc |
<ol><li>first item</li><li>second item etc</li></ol> | |
| #(newWindow=http://LinkUrl.com)Link Text# | <a target="_blank" href="http://LinkUrl.com">Link Text</a> | |
| #(insideIframe=http://LinkUrl.com)Link Text# | <a href="http://LinkUrl.com">Link Text</a> | |
| #(http://LinkUrl.com)Link Text# | <a target="_top" href="http://LinkUrl.com">Link Text</a> | |
| $ShowImage$ | <img src="URL of image" alt="[image]" /> | |
| $ShowThumbnail$ | <img src="URL of image" alt="[image]" /> | |
|
[-- >first cell >> second cell -- >first cell >> second cell --] |
<table border="0" class="BorderOn"> <tr> <td align="left" colspan="1">first cell</td> <td align="left">second cell<span><br></span></td> </tr> <tr> <td align="left" colspan="1">first cell</td> <td align="left">second cell<span><br></span></td> </tr> </table> |
The ShowImage or ShowThumbnail will display the image you set during the set up of the item.
To use any of the following characters within wikitext *, /, \, _, -, $, @, #, % put a \ in front of them.
Testing your Wikitext
Once you have finished inputting your Wikitext, click Preview to see how it will appear online.
If you have made any Wikitext formatting errors, Spektrix will highlight them to you and you’ll need to make changes before you can preview the content.
Once you’re happy with the preview of your content, click Save.
If this item is already on sale or visible on your website, it will be updated immediately with the changes.
Further Reading
To continue learning about how to configure iframes, take a look at the following articles: