{"id":118,"date":"2017-10-09T09:36:00","date_gmt":"2017-10-09T04:06:00","guid":{"rendered":"https:\/\/holithemes.com\/whatsapp-chat\/?p=118"},"modified":"2017-10-09T09:36:00","modified_gmt":"2017-10-09T04:06:00","slug":"shortcode-attributes","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/whatsapp-chat\/shortcode-attributes\/","title":{"rendered":"Shortcode Attributes"},"content":{"rendered":"

By default shortcodes get values what’s given in options page ( settings page of this plugin in admin ), we can override that using attributes<\/p>\n

Overall Attributes – supports most of the styles<\/h3>\n
\n
num\u00a0<\/span> – ( to change the number )<\/div>\n
val\u00a0 \u00a0<\/span>–\u00a0 ( to change the display text for – style-1, style-2, style-4, style-8 )<\/div>\n
style\u00a0<\/span> – (\u00a0 e.g. style=1\u00a0 \u00a0– right now there are 8 styles )<\/div>\n
position\u00a0<\/span> –\u00a0 ( e.g. position=fixed\u00a0 – to add fixed position style,\u00a0 any\u00a0 css positions )<\/div>\n
top\u00a0<\/span> –\u00a0 ( e.g.\u00a0 –\u00a0 left=10px , left=2% )<\/div>\n
right\u00a0<\/span> –\u00a0 ( e.g.\u00a0 –\u00a0 left=10px , left=2% )<\/div>\n
bottom\u00a0<\/span> –\u00a0 ( e.g.\u00a0 –\u00a0 left=10px , left=2% )<\/div>\n
left\u00a0<\/span> –\u00a0 ( e.g.\u00a0 –\u00a0 left=10px , left=2% )<\/div>\n
\n

home\u00a0 \u00a0<\/span>–\u00a0 \u00a0( home= hide ) to hide shortcodes in home page , category, archive
\ntext\u00a0<\/span> –\u00a0 \u00a0to add pre-filled text.\u00a0 \u00a0( e.g.\u00a0 text=”to the sales team:” ) ( since version 1.3 )
\nhide_mobile\u00a0<\/span> –\u00a0 \u00a0Hide that shortcode on mobile device (hide_mobile=true)
\nhide_desktop\u00a0<\/span> –\u00a0 \u00a0Hide that shortcode on desktop device (hide_desktop=true)
\ninline_issue<\/span>–\u00a0 \u00a0If shortcode output is display in new line and don’t want that, add inline_issue=”true”, fix for the autop issue<\/a><\/p>\n<\/div>\n<\/div>\n

type\u00a0<\/span> –\u00a0 ( group_chat or chat ) ,\u00a0 default to chat ,\u00a0 \u00a0shortcode – group chat<\/a><\/div>\n
group_id\u00a0<\/span> –\u00a0 if type=group_chat, then to change group_id. ( how to find WhatsApp group id<\/a> )<\/div>\n
\n
<\/div>\n
<\/div>\n
Shortcode Attributes Examples<\/a><\/div>\n
<\/div>\n
<\/div>\n<\/div>\n
\n
\n<\/div>\n

Attributes Specific to styles :<\/h3>\n

style-1\u00a0<\/strong><\/p>\n

Style-1 is the default theme button. (looks like currently activated Theme button). For customizable button, please select style-8<\/p>\n

Style-1-Examples<\/a><\/p>\n

\n
style-2<\/h6>\n
<\/div>\n
\n
\n
s2_text_color\u00a0<\/span> – to change text color<\/div>\n
s2_text_color_onhover<\/span>\u00a0 – to change text color on hover<\/div>\n
s2_decoration\u00a0<\/span> – to change text decoration – like adding underline ..<\/div>\n
s2_decoration_onhover\u00a0<\/span> – to chagne text decoration on hover<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
Style-2-Examples<\/a><\/div>\n
<\/div>\n
\n
\n<\/div>\n
\n
style-3<\/h6>\n
<\/div>\n<\/div>\n
\n
\n
s3_icon_size\u00a0<\/span> – to change icon size (\u00a0\u00a0s3_icon_size= 48px )<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
Style-3-Examples<\/a><\/div>\n
<\/div>\n
\n
\n<\/div>\n
\n
style-4<\/h6>\n<\/div>\n
\n
\n
s4_text_color\u00a0 <\/span>– to change text color inside chip<\/div>\n
s4_background_color\u00a0<\/span> – to change background color of chip<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
Style-4-Examples<\/a><\/div>\n
<\/div>\n
In some\u00a0 themes – wordpress adds autop\u00a0 – as it cause the element to display in next line.<\/div>\n
so to add chip style ( style-4 ) inline with in content- use style-4.1<\/div>\n
so style-4.1 make previous element display – inline.<\/div>\n
<\/div>\n
\n
\n<\/div>\n
\n
style-5<\/h6>\n<\/div>\n
\n
\n
s5_color\u00a0<\/span> – to change icon color<\/div>\n
s5_hover_color<\/span> – to change icon color when hover<\/div>\n
s5_icon_size\u00a0<\/span> – to change icon size (\u00a0s5_icon_size= 48px )<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
Style-5-Examples<\/a><\/div>\n
<\/div>\n
\n
\n<\/div>\n
\n
style-6<\/h6>\n<\/div>\n
\n
\n
s6_color\u00a0<\/span> – to change icon color<\/div>\n
s6_hover_color\u00a0<\/span> –\u00a0to change icon color when hover<\/div>\n
s6_icon_size\u00a0<\/span> –\u00a0to change icon size<\/div>\n
s6_circle_background_color\u00a0<\/span> –\u00a0to change circle background color ( border color\u00a0 )<\/div>\n
s6_circle_background_hover_color\u00a0<\/span> –\u00a0to change\u00a0 circle background color when hover<\/div>\n
s6_circle_height\u00a0<\/span> –\u00a0to change circle height<\/div>\n
s6_circle_width\u00a0<\/span> –\u00a0to change circle width<\/div>\n
s6_line_height\u00a0<\/span> –\u00a0to change circle line height<\/div>\n<\/div>\n<\/div>\n
\u00a0( circle have radius – but here how circle\u00a0 created is by adding border-radius to 50% of the given height, width )<\/div>\n
\u00a0( try to add same values for – s6_circle_height\u00a0\u00a0, s6_circle_width\u00a0\u00a0,\u00a0 s6_line_height\u00a0 – if not perfect then change the values )<\/div>\n
<\/div>\n
Style-6-Examples<\/a><\/div>\n
<\/div>\n
\n
\n<\/div>\n
\n
style-7<\/h6>\n<\/div>\n
\n
\n
s7_color\u00a0<\/span> –\u00a0to change icon color<\/div>\n
s7_hover_color\u00a0<\/span> –\u00a0to change icon color when hover<\/div>\n
s7_icon_size\u00a0<\/span> –\u00a0to change icon size<\/div>\n
s7_box_background_color\u00a0<\/span> –\u00a0to change box background color ( border color )<\/div>\n
s7_box_background_hover_color\u00a0<\/span> –\u00a0to change box background color on hover<\/div>\n
s7_box_height\u00a0<\/span> –\u00a0to change box height<\/div>\n
s7_box_width\u00a0<\/span> –\u00a0to change box width<\/div>\n
s7_line_height\u00a0<\/span> –\u00a0to change line height<\/div>\n
(\u00a0try to add same values for – s7_box_height, s7_box_width,\u00a0 s7_line_height\u00a0 –\u00a0 if not perfect then change the values )<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
Style-7-Examples<\/a><\/div>\n
<\/div>\n
\n
\n<\/div>\n
\n
style-8<\/h6>\n<\/div>\n
\n
s8_text_color\u00a0<\/span> –\u00a0to change text color<\/div>\n
s8_background_color\u00a0<\/span> –\u00a0to change button color<\/div>\n
s8_icon_color\u00a0<\/span> –\u00a0to change change icon color<\/div>\n
s8_text_color_onhover\u00a0<\/span> –\u00a0to change text color when hover on button<\/div>\n
s8_background_color_onhover\u00a0<\/span> –\u00a0to change button color when hover<\/div>\n
s8_icon_color_onhover\u00a0<\/span> –\u00a0to change icon color when hover on button<\/div>\n
s8_icon_float\u00a0<\/span> –\u00a0to change icon floats on left or right side of\u00a0text or hide icon<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n
Full width button\u00a0 ( Change width )<\/div>\n
<\/div>\n
There is sub style for style-8 which is style-8.1<\/div>\n
created to change width and there is no icon for style-8.1<\/div>\n
<\/div>\n
\n
s8_1_width<\/span>\u00a0 – to change width of button\u00a0 ( new for style – 8.1 )<\/div>\n
<\/div>\n<\/div>\n
\n
s8_text_color\u00a0<\/span>\u00a0–\u00a0to change text color<\/div>\n
s8_background_color\u00a0<\/span>\u00a0–\u00a0to change button color<\/div>\n
s8_text_color_onhover\u00a0<\/span>\u00a0–\u00a0to change text color when hover on button<\/div>\n
s8_background_color_onhover\u00a0<\/span>\u00a0–\u00a0to change button color when hover<\/div>\n<\/div>\n
<\/div>\n
\u00a0Style-8, 8.1 -Examples<\/a><\/div>\n
\n
\n<\/div>\n
\n
\n
style-9<\/h6>\n

( since version 1.4 )<\/p>\n<\/div>\n

\n
\n
s9_icon_size\u00a0<\/span> – to change icon size (\u00a0\u00a0s9_icon_size= 48px )<\/div>\n
<\/div>\n<\/div>\n<\/div>\n
Style-9-Examples<\/a><\/div>\n<\/div>\n
<\/div>\n
\n
\n<\/div>\n
Style-99 – own Image \/ GIF<\/strong> ( since version 1.5 )<\/div>\n
<\/div>\n
s99_img_height_desktop<\/span>\u00a0 –\u00a0 To Change the Image Height\u00a0\u00a0for Desktop devices
\ns99_img_width_desktop\u00a0<\/span> –\u00a0 To change the image Width for Desktop devices
\ns99_img_height_mobile\u00a0<\/span> –\u00a0 To Change the Image Height for Mobile devices
\ns99_img_width_mobile\u00a0<\/span> –\u00a0\u00a0To Change the Image Height for Mobile devices
\ns99_desktop_img\u00a0<\/span> –\u00a0 Image URL to display on Desktop devices
\ns99_mobile_img\u00a0<\/span> –\u00a0 Image URL to display on Mobile devices<\/div>\n
<\/div>\n
Style-99 – Shortcode<\/a><\/div>\n
<\/div>\n
\n
\n<\/div>\n
\n
\n
<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n","protected":false},"excerpt":{"rendered":"

By default shortcodes get values what’s given in options page ( settings page of this plugin in admin ), we can override that using attributes Overall Attributes – supports most of the styles num\u00a0 – ( to change the number ) val\u00a0 \u00a0–\u00a0 ( to change the display text for – style-1, style-2, style-4, style-8 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[2,5],"tags":[],"class_list":["post-118","post","type-post","status-publish","format-standard","hentry","category-docs","category-shortcodes"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/whatsapp-chat\/wp-json\/wp\/v2\/posts\/118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holithemes.com\/plugins\/whatsapp-chat\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/holithemes.com\/plugins\/whatsapp-chat\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/whatsapp-chat\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/whatsapp-chat\/wp-json\/wp\/v2\/comments?post=118"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/whatsapp-chat\/wp-json\/wp\/v2\/posts\/118\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/whatsapp-chat\/wp-json\/wp\/v2\/media?parent=118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/whatsapp-chat\/wp-json\/wp\/v2\/categories?post=118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/whatsapp-chat\/wp-json\/wp\/v2\/tags?post=118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}