The PageHTML plugin allows you to add custom HTML content to every survey page, whereas the HTML element adds HTML to a single page. This can be useful for adding instructions, images, or any other HTML elements to enhance the survey experience.

​
Basic Usage

const customContent = new PageHTML({
    content: '<h2>Welcome to our survey!</h2><p>Please answer the following questions honestly.</p>',
    position: 'top'
});

survey.addPlugin(customContent);

​
Parameters

content
string
required

The HTML content to be added to the survey page.

targetId
string
default: "survey-container"

The ID of the element where the content should be inserted.

position
string
default: "top"

The position where the content should be inserted. Can be ‘top’ or ‘bottom’.

styles
object

Custom styles to apply to the content container.

​
Methods

The PageHTML plugin inherits methods from the base Plugin class and implements some specific methods:

generateContent
function

Returns the HTML content to be inserted into the page.

const content = pageHTMLPlugin.generateContent();
updateContent
function

Updates the HTML content of the plugin.

Parameters:

  • newContent (string): The new HTML content
pageHTMLPlugin.updateContent('<h3>New content</h3><p>This is updated content.</p>');

​
Lifecycle Hooks

The PageHTML plugin uses the following lifecycle hooks:

initialize
function

Set up the HTML content in the DOM when the plugin is initialized.

beforePageRender
function

This method is called before each page is rendered, but currently doesn’t perform any actions.

afterPageRender
function

This method is called after each page is rendered, but currently doesn’t perform any actions.

beforeSurveyFinish
function

This method is called before the survey finishes, but currently doesn’t perform any actions.

​
Example

Here’s an example of how to create a PageHTML plugin with custom styling:

const welcomeMessage = new PageHTML({
    content: `
        <div class="welcome-message">
            <h2>Welcome to Our Customer Satisfaction Survey</h2>
            <p>Your feedback is important to us. This survey will take approximately 5 minutes to complete.</p>
            <ul>
                <li>All responses are anonymous</li>
                <li>Please answer all questions honestly</li>
                <li>If you have any issues, please contact our support team</li>
            </ul>
        </div>
    `,
    position: 'top',
    styles: {
        '.welcome-message': {
            backgroundColor: '#f0f8ff',
            padding: '20px',
            borderRadius: '8px',
            marginBottom: '20px',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        },
        '.welcome-message h2': {
            color: '#2c3e50',
            marginBottom: '10px'
        },
        '.welcome-message p': {
            color: '#34495e',
            marginBottom: '15px'
        },
        '.welcome-message ul': {
            paddingLeft: '20px'
        },
        '.welcome-message li': {
            marginBottom: '5px'
        }
    }
});

survey.addPlugin(welcomeMessage);

// Later, if you need to update the content:
welcomeMessage.updateContent(`
    <div class="welcome-message">
        <h2>Thank You for Completing Our Survey</h2>
        <p>Your responses have been recorded. We appreciate your time and feedback.</p>
    </div>
`);
Plugin ClassProgress Bar