Animating web pages with characters can enhance user engagement. The L2Dwidget plugin allows embedding Live2D characters—popular in anime-style designs—directly into any HTML page or blog platform.

Quick Setup Guide

Include the L2Dwidget library using the following CDN link:

https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js

Insert this script block into your HTML file to initialize a character:

<script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
            "jsonPath": "https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json",
            "scale": 1
        },
        "display": {
            "position": "right",
            "width": 300,
            "height": 500,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.8,
            "opacityOnHover": 0.1
        }
    });
</script>

Customization Options

• Size: Adjust width and height under display to scale the character.
• Position: Change position to 'left' or 'right', and fine-tune with hOffset (horizontal) and vOffset (vertical).
• Opacity: Set opacityDefault for default visibility and opacityOnHover for mouse-over effect.

Changing the Character Model

To use a different Live2D model, modify the jsonPath parameter inside the model object. Replace the URL path with one pointing to a different model.json file.

For example, to switch to the 'chitose' model, update the URL as follows:

"model": {
    "jsonPath": "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
    "scale": 1
}

Available Models

Adding to Blog Platforms (e.g., Blog Park / Cnblogs)

1. Log into your blog's admin panel.
2. Navigate to Settings.
3. Find the Blog Sidebar Announcement section.
4. Paste the complete initialization script into the HTML editor.
5. Save changes and view your blog’s homepage to see the character.

Reference Documentation

For further configuration options, refer to the official L2Dwidget documentation.