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