Custom block on standard page
Custom blocks allow editors to add more specialised or advanced functions to a standard page. Some examples include direct children as cards and dialog pop-up boxes.
When to use custom blocks
Do
- Use custom blocks to add advanced functionality to a page.
Don't
- Use custom blocks that have been developed specifically to be used only by a particular agency – unless that agency is yours.
- Custom blocks variations that are not included in this guide shouldn't be used. Custom block legacy variations that should no longer be used include:
- Content Statistics Block – use the Statistics block instead.
- DCS Agency Social Channels Block – use the Contact block instead.
How to add a custom block
To add a custom block to a standard page:
- Go to the Edit screen of your standard page and scroll down to the Add block button.
- There is a drop down arrow on the Add block button. Click the arrow to expand the drop down options in the Add block button and select Custom block.
- The Custom block will be generated. By default the Type will be set to Advanced block. You can leave this setting.
- In the Plugin field select the type of custom block you want to add, then follow the instructions for that block type:
To add Direct children as cards:
- In the Plugin dropdown, under the Navigation heading select Direct children as cards.
- In Column layout use the drop down to select either 2, 3 or 4 cards across. See How Direct children as cards displays in each variation.
- In Entity select Entity from route for the child pages of the page you are editing to display as cards.
To add a Webform:
In the Plugin dropdown, under the Webform heading select Webform.
In the Webform look up field start typing the name of an existing webform that you would like to add to your page. A dropdown of available forms should be generated. Select your form. Your webform must already have been created. If there is not an existing webform, see instructions for how to create a new webform.
To add a Dialog:
- In the Plugin dropdown, under the heading DCS select Dialog.
- From the Variant dropdown select either Simple or Callout. See How Dialog displays to see the difference.
- In the Open button label add the text for the button that will be on your webpage that will open the dialog.
- If you have selected Callout as your variant you also add text in the optional Copy field. Ignore this step if you have selected Variant > Simple.
- The Dialog type should have the Single call of action option selected from the dropdown.
- Add a Dialog title. This will be the heading at the top of your dialog.
- The Dialog body is an optional field where you can add information that you would like displayed within your dialog.
- The Legal disclaimer is optional. If you would like it to display, tick the Display legal disclaimer box and add your legal message in the Body field below it.
- Scroll to Action buttons.
- Add a Primary button label. This is the text that will be on the button within your dialog that links to another URL.
- Add a Primary button link. This is the link that customers will go to if they press the button within the dialog.
To add a Hubspot subscribe block:
- In the Plugin field select Hubspot subscribe.
- In the Heading field enter the heading you would like to appear. For example, ‘Subscribe to our enews’. This will appear as an H3 heading on the page.
- In the Text field enter a description about your subscription. For example, ‘Stay up-to-date with the latest news and events by subscribing to our weekly newsletter.’
- In the Form GUID field you will need to enter your Hubspot GUID. This will be found in your Hubspot account and copy/pasted into this field.
- To locate your form's GUID: In your HubSpot account, navigate to Marketing > Lead Capture > Forms. If you have a free HubSpot account, click Marketing > Forms. For more help with the GUID number you will need to contact Hubspot.
After you have embedded and saved your page, submit a test of the subscription component and check that the data is coming into your Hubspot account correctly.
5. Scroll to the bottom of the page and click the Save button.
How a webform displays
Example of a very basic form added with Custom block. You can see more examples in the Component guide to webforms.
How a dialog displays
You can see a live example of how the NSW Registry of Births, Deaths & Marriages have applied the component to their page Change of name.
Example of dialog with simple variation
Dialog title
The Dialog body text provides an extension of information on the page. You can include:
- lists
- sub-headings
- text
- links.
Example of dialog with callout variation
This 'copy' field is only available in callout variation. You can have a short piece of text appear on the page within the callout, with greater detail available in the expanded dialog box.
Dialog title
The Dialog body contains greater detail than the on-page callout.
The body text provides an extension of information on the page. You can include:
- lists
- sub-headings
- text
- links.
Example of dialog with callout variation with legal message
This 'copy' field is only available in callout variation. You can have a short piece of text appear on the page within the callout, with greater detail available in the expanded dialog box.
Dialog title
The Dialog body text provides an extension of information on the page. You can include:
- lists
- sub-headings
- text
- links.