CommentPreview provides a preview button for article and blog comments.


Importing multiple scripts? This quick guide shows how to combine the imports.
  • For site-wide use, an administrator can add the line below to the wiki's MediaWiki:ImportJS page.
  • For personal use, add the code snippet below to your global.js page (for use on all wikis) or your common.js page on your wiki (for use on a single wiki). Note that personal JS must be enabled for your account.
    type: 'script',
    articles: [


There are no special conditions to use the script.

Language precedence: uselang (url -> script settings) -> wgContentLanguage -> en.


It is possible to set some options: set debug mode, select language and add new language support etc.

Create configuration object (do it at first)
window.fng = $.extend(true, window.fng, {cp: (window.fng || {}).cp || {} });
Enable debug mode
window.fng.cp.debug = true; This mode could be enabled via debug parameter. Example: /wiki/article?debug=1
Select language
window.fng.cp.uselang = 'lang'; Where lang is language code (en, ru etc). By default, content language will be used (see language precedence above) with en as final fallback. uselang parameter takes precedence. Example: /wiki/article?uselang=en will select english language regardless any settings.
Use user language by default
window.fng.cp.useuserlang = true; This mode could be enabled via useuserlang parameter. Example: /wiki/article?useuserlang=1
Add language

window.fng.cp.lang = $.extend(true, {}, window.fng.cp.lang, {
    lang1: {preview: 'preview text', cancel: 'cancel text', publish: 'publish text'},
    lang2: {preview: 'preview text'}

Where lang1 and lang2 are language codes (en, es etc); preview text, cancel text and publish text is text for corresponding button. Any amount of comma-separated languages can be added. If some parameters are missed, then fallback language will be used (see language precedence above).

Note: it is possible to add language right into the code. One can suggest new language, or add it in the script, if js-familiar.

Change throbber
window.fng.cp.throbber = 'image';
Where image is full path to the throbber image. Only wikia-related sources allowed is (*, * and *


There is some classes to help style the preview.

main container aka modal wrapper.
preview window.
header. Header text lies in the H1 element.
X button in the header.
preview body. Inner content has page-like styling.
preview footer. Cancel and Publish buttons lies here.
buttons shares that class. Also, every button has own class: preview: cp-button-preview; publish: cp-button-publish; cancel: cp-button-cancel.

Note: you will have to use !important to override some styles. Do not override float property for .cp-button-preview. For realsies.

Forums' preview module styling

By default, this script's module interface does not use the styling of the preview modules found on Message Walls and on Special:Forum. As it aims for a basic interface that could work on any wiki, and encourages users to design it to their liking using the CSS classes mentioned on the previous section.

However, if you want a similar style to the one these mentioned features use on this script's module as well, you can put this snippet of code into your Wiki's Wikia.css:

.cp-footer {
    background-color: your color here; /* The background color for the footer */  
    padding: 14px;
.cp-header h1 {
    background-color: your color here; /* The background color for the header */ 
    width: 102.6%;
    padding: 16px;
    margin-left: -25px;
    margin-top: -10px;
    font-size: 20px;
    font-weight: bold;
.cp-window {
    background-color: your color here !important; /* The background color for the rest of the module*/
    height: 450px !important;
.cp-content {
    margin-top: 23px !important;
    border-color: your color here !important; /* The border color displayed around the content area on the module */
.cp-content .WikiaArticle .mw-content-ltr p{
    margin: .8em 0 .6em;
    margin-left: 8px;
.cp-xcancel {
    font-size: 30px !important;
    text-decoration: none !important;
    color: black !important;
    padding-top: 15px;
.cp-button-preview {
    margin-right: -8px !important;

Note: The "your color here" text must be replaced with the name of the color you would like to use.

Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+