Gutenberg

Using WP Live Chat Support with Gutenberg

 


 

If you use WordPress’s Gutenberg plugin (soon to be added to WordPress Core) as your WordPress Editor you can now place a WP Live Chat Support chat widget into a Gutenberg block. The first step is to enable Gutenberg blogs at WordPress Dashboard → Live Chat → Settings → Gutenberg Blocks.

Click the checkbox after Enable Gutenberg Blocks then scroll down and click the Save Settings button.

 

enabling gutenberg blocks

 

 

On this same panel you can customize the block so that your widget matches your branding.

 

 

  • Gutenberg Block Size: Choose Small, Medium, or Large from the dropdown.
  • Block Logo: You can upload your logo for use in the block. Click the Upload Logo button and either select your logo from the Media Library or upload your logo from your computer. Then click the Select Logo button to set your logo.
  • Display Icon: This is enabled by default
  • Custom HTML Template: In the editor screen shown below you can modify the HTML used to display the block.

 

 

 

gutenberg block ssettings

 

 


Using the WP Live Chat Gutenberg Block in a Post or Page

 

Open the Post or Page where you want to use the WPLC block. Click the plus sign icon to add a Gutenberg block.

 

gutenberg test block

 

Click the WP Live Chat Box button to add your WPLC block to the Post or Page.

 

adding a gutenberg test block

 

 

On the Select a style: dropdown click the style you wish to use to display your block. Normal, Center, or Wide.

 

gutenberg block size

 

Wide Block

 

wide block

 

Center Block

 

center block

 

Normal Block

 

normal block

 


 

Using the WPLC Trigger Block in a Post or Page

 

Open the Post or Page where you want to use the WPLC trigger block. Click the plus sign icon to add a Gutenberg block.

 

Click the WP Live Chat Trigger button to add your WPLC block to the Post or Page.

 

gutenberg block test

 

Publish your post or page. When a visitor clicks the Live Chat mini-banner on your Post or Page, the chat box will appear in the location assigned in the Chat Box settings (in this case, the lower-right corner) rather than in the middle of the page as happens with the WP Live Chat block.

 

gutenberg with live chat