HTML Attributes

💡 If you want to learn more about OpenWidget's JS API, check out our official Developers' Documentation.

What are those?

HTML Attributes are dedicated parameters you can add to interactive elements of your website or app, like function buttons. These attributes are designed to interact with OpenWidget, enabling you to trigger the available actions and features without writing complex code. As an example, with HTML Attributes, you can prepare a simple button that maximizes your OpenWdiget bubble and redirects your customer straight to a specific feature, like our Frequently Asked Question Template (FAQ) or other available forms.

In this guide, you'll learn how to enhance your website or app by adding custom interactions with the OpenWidget using simple HTML Attributes. They allow you to control the behavior of OpenWidget without requiring any JavaScript knowledge. Let's get started!

Structure of Attributes

HTML Attributes consist of two main parameters:

1. The main parameter: data-openwidget-action. This parameter determines the action you want to perform with OpenWidget. It has two available values: minimize and maximize.

2. The second optional parameter: data-openwidget-feature. This parameter is available only when the value for data-openwidget-action is set to maximize. You can include this parameter to specify which OpenWidget feature should appear after maximizing the widget. The list of available features looks as follows:

   • chat
   • faq
   • form-contact
   • form-feedback
   • form-bugreport

Using HTML Attributes

Let's see how you can use HTML Attributes to create custom interactions with OpenWidget:

• Minimize Action: To minimize OpenWidget's Home Screen, you can add the following attribute to your website's interactive element:

data-openwidget-action="minimize"

• Maximize Action without Specifying Feature: To maximize OpenWidget without specifying which feature should be opened, use the following attribute:

data-openwidget-action="maximize"

• Maximize Action with Specified Feature: To maximize OpenWidget and open a specific feature, use both data-openwidget-action and data-openwidget-feature attributes combined and specify which feature you would like to open:

data-openwidget-action="maximize" data-openwidget-feature="form-bugreport"

After adding our HTML Attributes, your custom button's code should look like this:

<button
  type="button"
  data-openwidget-action="maximize"
  data-openwidget-feature="form-bugreport"
>
  Report a Bug
</button>

• Maximize Action with Chat Feature and Predefined User Message: When you wish to directly maximize the OpenWidget to the Chat window, you can enhance the interaction by using the optional data-openwidget-messageDraft parameter. This parameter allows you to pre-fill the chat input field with a predefined message, offering a streamlined user experience.

To implement this feature, your custom button's HTML code should be structured as follows:

<button
  type="button"
  data-openwidget-action="maximize"
  data-openwidget-feature="chat"
  data-openwidget-messageDraft="I have found a bug!"
>
  Report a Bug
</button>

The action will have no effect if the widget's current state prevents message entry or if the user already has a message draft.

WordPress Tutorial

Now, let's walk through a step-by-step tutorial on adding a custom button to a WordPress website that maximizes OpenWidget with the form-bugreport feature.

1. Open Your WordPress Dashboard and Edit Your Content
   • Edit your post or page where you want to add the custom button or edit the existing page on your WordPress website.
   • Open the Block inserter by clicking on the + button available at the top left section of your WordPress.
   • From the Design section, click on Buttons.
   • Modify its looks, copy and other aspects to your liking.
   • Once your button is ready, open the Options menu available while editing your button and click on Edit as HTML.
   • In the div class structure, add the OpenWidget attributes that you'd like to use, for example:

data-openwidget-action="maximize" data-openwidget-feature="form-contact"

Now your button's code should look like on the following example:

<div
  class="wp-block-button"
  data-openwidget-action="maximize"
  data-openwidget-feature="form-contact"
>
  <a class="wp-block-button__link wp-element-button">Contact us!</a>
</div>

2. Publish or Update Your Content

   • Now that your button is ready, you can preview your post/page to see it in action. If everything looks good, publish your freshly updated content and that's it! Your customers can now use a new way to interact with OpenWidget.

What's next?

Congratulations! You've successfully learned how to use OpenWidget HTML Attributes to create custom interactions with the widget. By adding these attributes to your website's elements, you can easily control OpenWidget's behavior and enhance user engagement.

Remember, HTML Attributes provide a simple way for developers of all levels to integrate OpenWidget features without the need for JavaScript expertise. Enjoy customizing your user experience and making the most out of OpenWidget's capabilities!