Raw HTML Widget | Communifire Documentation

The Raw HTML widget allows you to create your own Page Builder widgets using HTML, CSS, and JavaScript. 

This widget gives you an open canvas where you can add custom coding to display any type of content that you desire. This content can be static HTML or dynamic using JavaScript. You can use JavaScript to pull data from external REST API data sources and then use HTML to display it inside the widget.

Here's what the properties of the Raw HTML widget looks like:

You can use the Insert resource textbox to insert system text resources. Start typing to search for a resource to insert. The resource will be added where your blinking cursor is.

Sample code as shown above:

<div class="custom-css-class">
/* Your custom HTML Code Goes in here*/
</div>

<script type="text/javascript">
// your javascript code goes in here
</script>

<style>
/* Your custom CSS styles go in here */
</style>

Note: Although you can add CSS into this widget and it will render just fine, it is good practice to put the CSS in CSS Overrides located in Control Panel  > System > CSS Overrides .

Social Media Feeds

This widget is also great for displaying Twitter, Facebook, and other social media feeds. These services provide you with a JavaScript code. Copy and paste the JavaScript code into the Raw HTML textarea.

When rendered in the Page Builder, it will look like this:

Axero Widget Style

If you want to put your RAW content inside of the Communifire Widget Style , you can use this code:

<div class="axero-widget">
    <div class="axero-widget-header">
        <h3>Header name</h3>
    </div>
    <div class="axero-widget-content">
        ... <!-- content goes here -->
    </div>
    <div class="axero-widget-footer">
        ... <!-- optional -->
    </div>
</div>

Here's what this looks like with a Twitter feed using the Axero Widget Style:

Other Uses

Please see Launchpad Widget - Small and the Launchpad Widget - Large for additional examples of what can be done with the Raw HTML widget.