Add custom element in click item for fire custom function by onclick

Hi all
I used BPMN-IO designer in my page.
I need to custom element like this:

I added custom element in click bpmn:Task by adding this code (in bpmn-modeler).

function (dereq, module, exports)

     module.exports.ROLE = [
                 {
                     label: 'Role',
                     actionName: 'replace-with-role',
                     className: 'bpmn-icon-role',
                     target: {
                         type: 'bpmn:Role'
                     }
                 }
                ]

---- ContextPadProvider.prototype.getContextPadEntries —

 if (is(businessObject, 'bpmn:Task'))
                        {
                            assign(actions, {
                                'append.end-event': appendAction('bpmn:EndEvent', 'bpmn-icon-end-event-none', 'end event'),
                                'append.gateway': appendAction('bpmn:ExclusiveGateway', 'bpmn-icon-gateway-xor', 'gateway'),
                                'append.append-task': appendAction('bpmn:Task', 'bpmn-icon-task', 'task'),
                                'append.append-role': appendAction('bpmn:custom', 'bpmn-icon-task', 'custom'),
                                'append.intermediate-event': appendAction('bpmn:IntermediateThrowEvent',
                                                                          'bpmn-icon-intermediate-event-none', 'intermediate')
                            });
                        }

I need to by click on custom element, display button control in my page.
I try to add event for this custom element but I could not do it. By click on custom item I encountered an error like this:

unknown type <bpmn:Role>

It would be very helpful if someone could explain solution for this problem.

Perhaps my answer on this page:

https://forum.bpmn.io/t/custom-components-running-in-a-different-scope/1146/4

can help you.