{"id":26034,"date":"2022-08-19T10:23:03","date_gmt":"2022-08-19T14:23:03","guid":{"rendered":"https:\/\/plumrocket.com\/docs\/?p=26034"},"modified":"2022-08-19T10:23:21","modified_gmt":"2022-08-19T14:23:21","slug":"how-to-add-custom-html-in-magento-2-social-login-extension","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/custom-html","title":{"rendered":"How to Add Custom HTML in Magento 2 Social Login Extension"},"content":{"rendered":"\n

This developer guide is for Magento 2 Social Login Pro<\/a> extension to demonstrate how to display any custom HTML only if the social buttons are displayed.<\/p>\n\n\n\n

Adding HTML code (to phtml file)<\/h2>\n\n\n\n

In order to show any HTML code only if social buttons are displayed, use the code while editing phtml file:<\/p>\n\n\n\n

<\/div>
<?php if($this->helper('PlumrocketSocialLoginFreeHelperData')->hasButtons()): ?>\n    <!-- Custom Html -->\n    <?php echo $this->getLayout()\n        ->createBlock(\"PlumrocketSocialLoginProBlockButtons\")\n        ->setTemplate(\"Plumrocket_SocialLoginPro::customer\/form\/login\/buttons.phtml\")\n        ->toHtml(); ?>\n    <!-- Custom Html -->\n<?php endif; ?><\/code><\/pre><\/div>\n\n\n\n
\r\n    
Code Example<\/p>\r\n\r\n    
<\/div>
<?php if($this->helper('PlumrocketSocialLoginFreeHelperData')->hasButtons()): ?>\n        <div class=\"pslogin-spacer pslogin-clearfix\">\n            <table>\n                <tr>\n                    <td><div class=\"pslogin-border\"><\/div><\/td>\n                    <td class=\"pslogin-bordertext w25\"><?php echo __('OR'); ?><\/td>\n                    <td><div class=\"pslogin-border\"><\/div><\/td>\n                <\/tr>\n            <\/table>\n        <\/div>\n        <?php echo $this->getLayout()\n            ->createBlock(\"PlumrocketSocialLoginProBlockButtons\")\n            ->setTemplate(\"Plumrocket_SocialLoginPro::customer\/form\/login\/buttons.phtml\")\n            ->toHtml(); ?>\n     <?php endif; ?><\/code><\/pre><\/div>\r\n<\/div><\/p>\n\n\n\n
Adding HTML code (to html file)<\/h2>\n\n\n\n
In order to show any HTML code only if social buttons are displayed, use the code while editing html file:<\/p>\n\n\n\n
<\/div>
<!-- Custom Html with attribute data-bind=\"if: window.psloginButtons\" -->\n<div data-bind=\"html: window.psloginButtons\"><\/div>\n<!-- Custom Html with attribute data-bind=\"if: window.psloginButtons\" -->\n    <\/code><\/pre><\/div>\n\n\n\n
\r\n    
Code Example<\/p>\r\n\r\n    
<\/div>
<div class=\"pslogin-spacer pslogin-clearfix\" data-bind=\"if: window.psloginButtons\">\n        <table>\n            <tr>\n                <td><div class=\"pslogin-border\"><\/div><\/td>\n                <td class=\"pslogin-bordertext w25\" data-bind=\"i18n: 'OR'\"><\/td>\n                <td><div class=\"pslogin-border\"><\/div><\/td>\n            <\/tr>\n        <\/table>\n    <\/div>\n    <div data-bind=\"html: window.psloginButtons\"><\/div><\/code><\/pre><\/div>\r\n<\/div><\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
This developer guide is for Magento 2 Social Login Pro extension to demonstrate how to display any custom HTML only if the social buttons are displayed. Adding HTML code (to phtml file) In order to show any HTML code only if social buttons are displayed, use the code while editing phtml file: Code Example <?php … <\/p>\n
Continue reading “How to Add Custom HTML in Magento 2 Social Login Extension”<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[360],"tags":[],"yoast_head":"\nHow to Add Custom HTML in Magento 2 Social Login Extension - Plumrocket Documentation<\/title>\n<meta name=\"description\" content=\"This developer guide is for Magento 2 Social Login Pro extension to demonstrate how to display any custom HTML only if the social buttons are displayed.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/custom-html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Custom HTML in Magento 2 Social Login Extension\" \/>\n<meta property=\"og:description\" content=\"This developer guide is for Magento 2 Social Login Pro extension to demonstrate how to display any custom HTML only if the social buttons are displayed.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/custom-html\" \/>\n<meta property=\"og:site_name\" content=\"Plumrocket Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-19T14:23:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-19T14:23:21+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Plumrocket\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Add Custom HTML in Magento 2 Social Login Extension - Plumrocket Documentation","description":"This developer guide is for Magento 2 Social Login Pro extension to demonstrate how to display any custom HTML only if the social buttons are displayed.","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:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/custom-html","og_locale":"en_US","og_type":"article","og_title":"How to Add Custom HTML in Magento 2 Social Login Extension","og_description":"This developer guide is for Magento 2 Social Login Pro extension to demonstrate how to display any custom HTML only if the social buttons are displayed.","og_url":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/custom-html","og_site_name":"Plumrocket Documentation","article_published_time":"2022-08-19T14:23:03+00:00","article_modified_time":"2022-08-19T14:23:21+00:00","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Plumrocket","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/plumrocket.com\/docs\/#website","url":"https:\/\/plumrocket.com\/docs\/","name":"Plumrocket Documentation","description":"Extensions docs, troubleshootings etc.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/plumrocket.com\/docs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/custom-html#webpage","url":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/custom-html","name":"How to Add Custom HTML in Magento 2 Social Login Extension - Plumrocket Documentation","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/#website"},"datePublished":"2022-08-19T14:23:03+00:00","dateModified":"2022-08-19T14:23:21+00:00","author":{"@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8"},"description":"This developer guide is for Magento 2 Social Login Pro extension to demonstrate how to display any custom HTML only if the social buttons are displayed.","breadcrumb":{"@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/custom-html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/custom-html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/custom-html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Magento 2 Extensions","item":"https:\/\/plumrocket.com\/magento-extensions"},{"@type":"ListItem","position":2,"name":"Magento 2 Social Login Pro","item":"https:\/\/plumrocket.com\/magento-social-login-pro"},{"@type":"ListItem","position":3,"name":"Documentation","item":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro"},{"@type":"ListItem","position":4,"name":"v4","item":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4"},{"@type":"ListItem","position":5,"name":"Developer Guide","item":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide"},{"@type":"ListItem","position":6,"name":"How to Add Custom HTML"}]},{"@type":"Person","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8","name":"Plumrocket","image":{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/10c44aa45aab391250913d982e552e53?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/10c44aa45aab391250913d982e552e53?s=96&d=mm&r=g","caption":"Plumrocket"}}]}},"_links":{"self":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/26034"}],"collection":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/comments?post=26034"}],"version-history":[{"count":2,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/26034\/revisions"}],"predecessor-version":[{"id":26036,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/26034\/revisions\/26036"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/media?parent=26034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/categories?post=26034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/tags?post=26034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}