{"id":38740,"date":"2021-07-13T18:16:57","date_gmt":"2021-07-13T16:16:57","guid":{"rendered":"http:\/\/support.ilevia.com\/?p=38740"},"modified":"2023-04-06T10:48:57","modified_gmt":"2023-04-06T08:48:57","slug":"custom-widget-script","status":"publish","type":"post","link":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget-script\/","title":{"rendered":"Custom widget script"},"content":{"rendered":"[et_pb_section fb_built=”1″ _builder_version=”4.16″ _module_preset=”default” custom_padding=”0px|||||” global_colors_info=”{}”][et_pb_row _builder_version=”4.16″ _module_preset=”default” custom_padding=”0px||0px|||” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

<\/strong><\/p>\n

CUSTOM WIDGET SCRIPT<\/h1>\n[\/et_pb_text][et_pb_divider _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” custom_padding=”0px|||||” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n
\n

INTRODUCTION<\/strong><\/h2>\n<\/blockquote>\n

This guide will show you how to configure the script in order to link the custom widget with the components like setpoint<\/strong>,\u00a0infos<\/strong>, switch<\/strong>, drop down<\/strong>, etc… to the svg file selected in the component properties. Obviously the script will change based on the structure of the svg file<\/p>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

\n

Script’s Variables<\/strong><\/h3>\n<\/blockquote>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

These are the scritp’a variables. We remind that the variables don’t need to have the same name and id, this is a demostration of what can be done with a javascript.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”http:\/\/support.ilevia.com\/wp-content\/uploads\/2021\/07\/Custom_widget_script_variables.png” alt=”List of all the variables that will be used inside the Javascript” title_text=”Custom_widget_script_variables” show_bottom_space_phone=”off” show_bottom_space_last_edited=”off|phone” _builder_version=”4.19.1″ _module_preset=”default” custom_margin=”0px||0px||false|false” custom_margin_tablet=”” custom_margin_phone=”30px||30px||false|false” custom_margin_last_edited=”on|desktop” hover_enabled=”0″ global_colors_info=”{}” show_in_lightbox=”on” box_shadow_style=”preset2″ sticky_enabled=”0″][\/et_pb_image][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ _module_preset=”default” custom_margin=”-11px|||||” custom_padding=”||0px|||” global_colors_info=”{}”]\n

var Svg<\/strong><\/em>: This variable will take the name of the svg file.<\/p>\n

var color<\/strong><\/em>: This variable will gather the system drawing color.<\/p>\n

\n

Components variables<\/strong><\/span>:<\/p>\n<\/blockquote>\n

var room<\/strong><\/em>: This variable will gather the room number from the json Text field on the properties of the Custom widget<\/strong> component.<\/p>\n

var temp<\/strong><\/em>: This variable will assume the value of the component with the ID 31, that in our case is an Info<\/strong> component that display a temperature value.<\/p>\n

var Setpoint<\/strong><\/em>: This variable will assume the value of the component with the ID 32, that in our case is a Setpoint<\/strong> component.<\/p>\n

var fan_opacity<\/strong><\/em>: This variable assume 1 as its default value.<\/p>\n

var deumidification_opacity<\/strong><\/em>:\u00a0This variable assume 1 as its default value.<\/p>\n

var cool_opacity<\/strong><\/em>: This variable will assume 0 as its default value.<\/p>\n

var heat_opacity<\/strong><\/em>:\u00a0This variable will assume 0 as its default value.<\/p>\n

var mode<\/strong><\/em>: This variable will assume the value of the component with the ID 33, that in our case is a drop down<\/strong> component.\u00a0<\/em><\/p>\n

var background<\/strong><\/em>: This variable will set the color of the back ground of the SVG file.<\/p>\n

\n

SVG Link variables<\/strong><\/span>:<\/p>\n<\/blockquote>\n

var svg_room<\/strong><\/em>:\u00a0This variable create a link between the svg file layer.<\/p>\n

svg_room.Text<\/strong><\/em>: This statement will apply the room value to the svg element in the svg file.<\/p>\n

var svg_room_background<\/strong><\/em>: This variable create a link between the svg file element “room background<\/strong>“<\/p>\n

var svg_background<\/strong><\/em>:\u00a0This variable create a link between the svg file element “background<\/strong>“<\/p>\n

var svg_Temperature<\/strong><\/em>: This variable create a link between the svg file element “Temperature<\/b>“.<\/p>\n

var svg_Setpoint<\/strong><\/em>: This variable create a link between the svg file element “S<\/strong>etpoint<\/b>“.<\/p>\n

var svg_deumidification<\/strong><\/em>:\u00a0This variable create a link between the svg file layer.<\/p>\n

var svg_fan<\/strong><\/em>: This variable create a link between the svg file element “fan<\/b>“.<\/p>\n

var svg_heat<\/strong><\/em>:\u00a0This variable create a link between the svg file element “heat<\/b>“.<\/p>\n

var svg_fan<\/em><\/strong>:\u00a0\u00a0This variable create a link between the svg file element “Cool<\/b>“.<\/p>\n

 <\/p>\n

UpdateWidget()<\/strong>: This statement will refresh the widget element when executed in the User interface.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_divider _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_divider][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

\n

Script’s Functions<\/strong><\/h3>\n<\/blockquote>\n[\/et_pb_text][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]\n

These are the functions\u00a0<\/strong>that are going to be used in order to change the values of the svg image elements inside the EVE Remote User interface.<\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”http:\/\/support.ilevia.com\/wp-content\/uploads\/2021\/07\/Custom_widget_function_temperaturechanged.png” alt=”Function temperature_changed, this function will set the value of current room temperature to the corresponding element of the custom widget inside the user interface of the Home automation app EVE Remote Plus” title_text=”Custom_widget_function_temperaturechanged” show_in_lightbox=”on” _builder_version=”4.19.1″ _module_preset=”default” custom_margin_tablet=”” custom_margin_phone=”30px||0px||false|false” custom_margin_last_edited=”on|phone” hover_enabled=”0″ global_colors_info=”{}” box_shadow_style=”preset2″ sticky_enabled=”0″][\/et_pb_image][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ _module_preset=”default” custom_margin=”-20px|||||” global_colors_info=”{}”]\n

Function Temperature changed<\/strong>:<\/p><\/blockquote>\n

var val<\/strong>= getValueAsInt(temp)<\/strong>: This variable will gather the current value of the variable temp<\/strong>.
\n<\/br>
\nlog\u00a0(“Temperature\u00a0changed\u00a0to:”+val)<\/strong>: This log will print the string “Temperature\u00a0changed\u00a0to:” + <\/strong>the value of the val variable.<\/p>\n

\n<\/br><\/p>\n
svg_temperature.Text\u00a0=\u00a0(parseInt(val*10)\/10).toString()+”\u00b0”: <\/strong>This operation will parse the value coming from the variable svg_temperautre<\/strong> and write it on the User interface element already parsed.<\/div>\n

<\/br><\/p>\n

UpdateWidget()<\/strong>: This statement will refresh the widget element when executed in the User interface.<\/div>\n<\/div>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_divider _builder_version=”4.16″ _module_preset=”default” locked=”off” global_colors_info=”{}”][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”http:\/\/support.ilevia.com\/wp-content\/uploads\/2021\/07\/Custom_widget_function_modechanged.png” alt=”Function mode_changed, this function allow to change the current mode of a thermostat, based on the component drop down value the icons will be hidden or showed insdie the custom widged svg element inside the user interface of the Home automation app EVE Remote Plus” title_text=”Custom_widget_function_modechanged” show_in_lightbox=”on” _builder_version=”4.19.1″ _module_preset=”default” custom_margin_tablet=”” custom_margin_phone=”30px||||false|false” custom_margin_last_edited=”on|phone” hover_enabled=”0″ global_colors_info=”{}” box_shadow_style=”preset2″ sticky_enabled=”0″][\/et_pb_image][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ _module_preset=”default” custom_margin=”-20px|||||” global_colors_info=”{}”]\n
\n

Function mode_changed<\/strong>:<\/p>\n<\/blockquote>\n

\n
var\u00a0val=getValueAsInt(mode<\/strong>)<\/strong>:\u00a0This variable will gather the current value of the variable “mode<\/strong>“.<\/span><\/div>\n

 <\/p>\n

\n
log\u00a0(“Mode\u00a0changed\u00a0to:”+val<\/strong>)<\/strong>: This log will print the string\u00a0“Mode\u00a0changed\u00a0to:<\/strong>” + the value coming from the variable “val<\/strong>“.<\/span><\/div>\n

 <\/p>\n

1\u00b0 if<\/span>:\u00a0<\/strong>This operation will set if the value of the drop down is 0, then the deumidification\u00a0<\/strong>icon will be visible in the interface, else it will be hidden;<\/div>\n
2\u00b0 if<\/strong><\/span>: This operation will set if the value of the drop down is 1, then the fan\u00a0<\/strong>icon will be visible in the interface, else it will be hidden;<\/div>\n
3\u00b0 if<\/strong><\/span>:\u00a0This operation will set if the value of the drop down is 2, then the heat<\/strong> icon will be visible in the interface, else it will be hidden;<\/div>\n
4\u00b0 if<\/strong><\/span>:\u00a0This operation will set if the value of the drop down is 3, then the cool<\/strong> icon will be visible in the interface, else it will be hidden.<\/div>\n
<\/div>\n

 <\/p>\n

UpdateWidget()<\/strong>: This statement will refresh the widget element when executed in the User interface.<\/div>\n<\/div>\n<\/div>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” locked=”off” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_divider _builder_version=”4.16″ _module_preset=”default” locked=”off” global_colors_info=”{}”][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”http:\/\/support.ilevia.com\/wp-content\/uploads\/2021\/07\/Custom_widget_function_setpointchanged.png” alt=”Function setpoint_changed, This function allows the user to monitor the current setpoint value applyed at the corresopnding element inside the user interface of the Home automation app EVE Remote plus.” title_text=”Custom_widget_function_setpointchanged” show_in_lightbox=”on” _builder_version=”4.19.1″ _module_preset=”default” custom_margin_tablet=”” custom_margin_phone=”||||false|false” custom_margin_last_edited=”on|phone” hover_enabled=”0″ global_colors_info=”{}” box_shadow_style=”preset2″ sticky_enabled=”0″][\/et_pb_image][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ _module_preset=”default” custom_margin=”-21px|||||” global_colors_info=”{}”]\n
\n

Function setpoint_changed<\/strong>:<\/p>\n<\/blockquote>\n

var\u00a0val=getValueAsDouble(setpoint)<\/strong>: This variable will get the value of the variable “setpoint”<\/strong>;<\/p>\n

 <\/p>\n

log\u00a0(“Setpoint\u00a0changed\u00a0to:”+val<\/strong>)<\/strong>: This log will print\u00a0“Setpoint\u00a0changed\u00a0to:”\u00a0<\/strong>+ the value coming from the “val<\/strong>” variable;<\/span><\/div>\n

 <\/p>\n

svg_setpoint.Text\u00a0=\u00a0(parseInt(val*10)\/10).toString()+<\/strong>“\u00b0”<\/strong>:\u00a0This operation will parse the value coming from the variable svg_setpoint<\/b>\u00a0and write it on the User interface element already parsed.<\/div>\n
<\/div>\n

 <\/p>\n

Updatewidget()<\/strong>:\u00a0\u00a0This statement will refresh the widget element when executed in the User interface.<\/div>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” locked=”off” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_divider _builder_version=”4.16″ _module_preset=”default” locked=”off” global_colors_info=”{}”][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”http:\/\/support.ilevia.com\/wp-content\/uploads\/2021\/07\/Custom_widget_function_busy_changed.png” alt=”Function busy_changed, this variable allows the user to monitor the each room occupation by a changing color transaction that will affect on the background element of the custom widget component inside the User interface of the Home automation app EVE Remote Plus ” title_text=”Custom_widget_function_busy_changed” show_in_lightbox=”on” _builder_version=”4.19.1″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” box_shadow_style=”preset2″ sticky_enabled=”0″][\/et_pb_image][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ _module_preset=”default” custom_margin=”-20px|||||” global_colors_info=”{}”]\n
\n

Function busy_changed<\/strong>:<\/p>\n<\/blockquote>\n

\n
var\u00a0val=getValueAsBoolean(busy<\/strong>)<\/strong>: This variable will get the value of the variable “busy<\/strong>“.\u00a0<\/span><\/div>\n

 <\/p>\n

log\u00a0(“Busy\u00a0changed\u00a0to:”+val<\/strong>)<\/strong>:<\/span>\u00a0This log will pint\u00a0“Busy\u00a0changed\u00a0to:” + <\/strong>the value of the variable “val”<\/strong>.<\/div>\n
<\/div>\n

 <\/p>\n

If – Else<\/strong> operation<\/strong>: This openration says that if<\/strong> the value of the variable “val” is true then the color specified in the svg_background.Fill will be set as background color in the svg in the user interface, else<\/strong>\u00a0the other color will be set in the svg element in the user interface.<\/div>\n
<\/div>\n

 <\/p>\n

UpdateWidget<\/strong>():\u00a0This statement will refresh the widget element when executed in the User interface.<\/span><\/div>\n<\/div>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” locked=”off” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_divider _builder_version=”4.16″ _module_preset=”default” locked=”off” global_colors_info=”{}”][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”http:\/\/support.ilevia.com\/wp-content\/uploads\/2021\/07\/Custom_widget_settriggers.png” alt=”These statement setTriggers, are needed in order to execute the variables inside the EVE server.” title_text=”Custom_widget_settriggers” show_in_lightbox=”on” _builder_version=”4.19.1″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” box_shadow_style=”preset2″ sticky_enabled=”0″][\/et_pb_image][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ _module_preset=”default” custom_margin=”-17px|||||” global_colors_info=”{}”]\n
\n

SetTriggers<\/strong>:<\/p>\n<\/blockquote>\n

setTrigger(temp,”temperature_changed”)<\/strong>: This statement will set a trigger to the function “temperature_changed<\/strong>“;<\/p>\n

 <\/p>\n

setTrigger(mode,”mode_changed”<\/strong>)<\/strong>:\u00a0This statement will set a trigger to the function “mode_changed<\/strong>“;<\/p>\n

 <\/p>\n

setTrigger(setpoint,”setpoint_changed”<\/strong>)<\/strong>:\u00a0This statement will set a trigger to the function “setpoint_changed<\/strong>“;<\/span><\/p>\n

<\/span><\/p>\n

setTrigger(busy,”busy_changed”<\/strong>)<\/strong>:\u00a0This statement will set a trigger to the function “busy_changed<\/strong>“.<\/span><\/p>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ inner_shadow=”on” _builder_version=”4.19.1″ background_color=”#fafafa” parallax=”on” min_height=”280px” custom_margin=”30px||||false|false” locked=”off” collapsed=”off” global_colors_info=”{}” global_module=”59323″ theme_builder_area=”post_content”][et_pb_row module_class=” et_pb_row_fullwidth” _builder_version=”4.16″ width=”91%” width_tablet=”80%” width_last_edited=”off|desktop” max_width=”90%” max_width_tablet=”80%” max_width_phone=”” max_width_last_edited=”on|desktop” custom_padding=”30px|0px|22.8594px|0px|false|false” make_fullwidth=”on” collapsed=”off” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]\n

Still Need Help? Our Customer Service Is Here For You.<\/h1>\n[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” width=”100%” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_button button_url=”http:\/\/support.ilevia.com\/support-request\/” button_text=”Ask For Help” button_alignment=”center” _builder_version=”4.19.1″ custom_button=”on” button_text_size=”20px” button_text_color=”#1e84f4″ button_bg_color=”#FFFFFF” button_border_width=”2px” button_border_color=”#1e84f4″ button_font=”||||||||” button_use_icon=”off” custom_margin=”||||false|false” custom_margin_tablet=”” custom_margin_phone=”|0px|||false|false” custom_margin_last_edited=”on|phone” box_shadow_style=”preset2″ box_shadow_spread=”-80px” global_colors_info=”{}” box_shadow_spread__hover=”0px” box_shadow_spread__hover_enabled=”on” theme_builder_area=”post_content”][\/et_pb_button][et_pb_button button_url=”http:\/\/support.ilevia.com\/support-request\/” button_text=”Make a suggestion” button_alignment=”center” _builder_version=”4.19.1″ custom_button=”on” button_text_size=”20px” button_text_color=”#1e84f4″ button_bg_color=”#FFFFFF” button_border_width=”2px” button_border_color=”#1e84f4″ button_use_icon=”off” custom_margin=”|||0px|false|false” custom_margin_tablet=”” custom_margin_phone=”|||0px|false|false” custom_margin_last_edited=”on|phone” custom_padding=”|||25px|false|false” box_shadow_style=”preset2″ box_shadow_spread=”-80px” locked=”off” global_colors_info=”{}” box_shadow_spread__hover=”0px” box_shadow_spread__hover_enabled=”on” theme_builder_area=”post_content”][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"

CUSTOM WIDGET SCRIPT INTRODUCTION This guide will show you how to configure the script in order to link the custom widget with the components like setpoint,\u00a0infos, switch, drop down, etc… to the svg file selected in the component properties. Obviously the script will change based on the structure of the svg file Script’s Variables These […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"categories":[1,18],"tags":[],"class_list":["post-38740","post","type-post","status-publish","format-standard","hentry","category-all","category-configuration-software-en"],"yoast_head":"\nCustom widget script Ilevia Support |<\/title>\n<meta name=\"description\" content=\"This guide will explain in a detailed way how to build a javascript for the custom widget component.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget-script\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Filippo Amabilia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget-script\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget-script\\\/\"},\"author\":{\"name\":\"Filippo Amabilia\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#\\\/schema\\\/person\\\/08a8d13dee0bc9f160da55efe97b7959\"},\"headline\":\"Custom widget script\",\"datePublished\":\"2021-07-13T16:16:57+00:00\",\"dateModified\":\"2023-04-06T08:48:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget-script\\\/\"},\"wordCount\":2678,\"publisher\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#organization\"},\"articleSection\":[\"All Archives\",\"Configuration Software\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget-script\\\/\",\"url\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget-script\\\/\",\"name\":\"Custom widget script Ilevia Support |\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#website\"},\"datePublished\":\"2021-07-13T16:16:57+00:00\",\"dateModified\":\"2023-04-06T08:48:57+00:00\",\"description\":\"This guide will explain in a detailed way how to build a javascript for the custom widget component.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget-script\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget-script\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/configuration-software-en\\\/custom-widget-script\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Software Configurazione\",\"item\":\"https:\\\/\\\/support.ilevia.com\\\/it\\\/archivi\\\/software-configurazione\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Custom widget script\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/\",\"name\":\"Ilevia Support\",\"description\":\"Assistance & Technical Guides\",\"publisher\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#organization\",\"name\":\"Ilevia\",\"url\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"http:\\\/\\\/support.ilevia.com\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/ilevia.png\",\"contentUrl\":\"http:\\\/\\\/support.ilevia.com\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/ilevia.png\",\"width\":500,\"height\":500,\"caption\":\"Ilevia\"},\"image\":{\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/ileviaofficial\\\/\",\"https:\\\/\\\/www.instagram.com\\\/ilevia_official\\\/\",\"https:\\\/\\\/it.linkedin.com\\\/company\\\/ilevia\\\/\",\"https:\\\/\\\/www.youtube.com\\\/ilevia\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/#\\\/schema\\\/person\\\/08a8d13dee0bc9f160da55efe97b7959\",\"name\":\"Filippo Amabilia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0e396093874891309dc46571e6eec478bc2a5080be4f76a70e1ca9deb9f99eec?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0e396093874891309dc46571e6eec478bc2a5080be4f76a70e1ca9deb9f99eec?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0e396093874891309dc46571e6eec478bc2a5080be4f76a70e1ca9deb9f99eec?s=96&d=mm&r=g\",\"caption\":\"Filippo Amabilia\"},\"url\":\"https:\\\/\\\/support.ilevia.com\\\/en\\\/author\\\/filippo-amabilia\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom widget script Ilevia Support |","description":"This guide will explain in a detailed way how to build a javascript for the custom widget component.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget-script\/","twitter_misc":{"Written by":"Filippo Amabilia","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget-script\/#article","isPartOf":{"@id":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget-script\/"},"author":{"name":"Filippo Amabilia","@id":"https:\/\/support.ilevia.com\/en\/#\/schema\/person\/08a8d13dee0bc9f160da55efe97b7959"},"headline":"Custom widget script","datePublished":"2021-07-13T16:16:57+00:00","dateModified":"2023-04-06T08:48:57+00:00","mainEntityOfPage":{"@id":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget-script\/"},"wordCount":2678,"publisher":{"@id":"https:\/\/support.ilevia.com\/en\/#organization"},"articleSection":["All Archives","Configuration Software"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget-script\/","url":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget-script\/","name":"Custom widget script Ilevia Support |","isPartOf":{"@id":"https:\/\/support.ilevia.com\/en\/#website"},"datePublished":"2021-07-13T16:16:57+00:00","dateModified":"2023-04-06T08:48:57+00:00","description":"This guide will explain in a detailed way how to build a javascript for the custom widget component.","breadcrumb":{"@id":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget-script\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget-script\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/support.ilevia.com\/en\/configuration-software-en\/custom-widget-script\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/support.ilevia.com\/en\/"},{"@type":"ListItem","position":2,"name":"Software Configurazione","item":"https:\/\/support.ilevia.com\/it\/archivi\/software-configurazione\/"},{"@type":"ListItem","position":3,"name":"Custom widget script"}]},{"@type":"WebSite","@id":"https:\/\/support.ilevia.com\/en\/#website","url":"https:\/\/support.ilevia.com\/en\/","name":"Ilevia Support","description":"Assistance & Technical Guides","publisher":{"@id":"https:\/\/support.ilevia.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/support.ilevia.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/support.ilevia.com\/en\/#organization","name":"Ilevia","url":"https:\/\/support.ilevia.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/support.ilevia.com\/en\/#\/schema\/logo\/image\/","url":"http:\/\/support.ilevia.com\/wp-content\/uploads\/2018\/12\/ilevia.png","contentUrl":"http:\/\/support.ilevia.com\/wp-content\/uploads\/2018\/12\/ilevia.png","width":500,"height":500,"caption":"Ilevia"},"image":{"@id":"https:\/\/support.ilevia.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ileviaofficial\/","https:\/\/www.instagram.com\/ilevia_official\/","https:\/\/it.linkedin.com\/company\/ilevia\/","https:\/\/www.youtube.com\/ilevia\/"]},{"@type":"Person","@id":"https:\/\/support.ilevia.com\/en\/#\/schema\/person\/08a8d13dee0bc9f160da55efe97b7959","name":"Filippo Amabilia","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/0e396093874891309dc46571e6eec478bc2a5080be4f76a70e1ca9deb9f99eec?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0e396093874891309dc46571e6eec478bc2a5080be4f76a70e1ca9deb9f99eec?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e396093874891309dc46571e6eec478bc2a5080be4f76a70e1ca9deb9f99eec?s=96&d=mm&r=g","caption":"Filippo Amabilia"},"url":"https:\/\/support.ilevia.com\/en\/author\/filippo-amabilia\/"}]}},"_links":{"self":[{"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/posts\/38740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/comments?post=38740"}],"version-history":[{"count":73,"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/posts\/38740\/revisions"}],"predecessor-version":[{"id":62384,"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/posts\/38740\/revisions\/62384"}],"wp:attachment":[{"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/media?parent=38740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/categories?post=38740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/support.ilevia.com\/en\/wp-json\/wp\/v2\/tags?post=38740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}