Webteq Solution Admin View - User Guideline Common Update Version Date Update Detail Prepared by 1.00 14th Jul 2017 Initial Draft Huei Qi 1.01 07th Aug 2017 Facebook Plugin Peter 1.02 28th Aug 2017 Check Home/Subpage Masthead Peter 1.03 21st Sep 2017 Facebook Messenger plugin (No 4 & Wen He 5) 1.04 05th Oct 2017 Mobile view Facebook Messenger Wen He (update) 1.05 14th Nov 2017 Facebook Messenger plugin – Wen He update (No. 4b(v) & No. 5b(v)) 1.06 08th Dec 2017 Homepage Facebook Messenger – Wen He update source code (No. 4b(v)) 1.07 3rd Jan 2018 Open Web WhatsApp Application Ben 1.08 5th Jan 2018 Add Waze Button Woon Ping Prepared By Webteq Solution Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 1 of 35
Table Contents 1. Update Company Address................................................................................................................... 3 2. Update Company Address (Mobile).................................................................................................... 5 3. Bottom Banner – Facebook Plugin...................................................................................................... 7 4. Bottom Banner – Facebook Messenger (By default opened)........................................................... 11 5. Bottom Banner – Facebook Messenger (By default closed)............................................................. 17 6. Bottom Banner – Facebook Messenger (Mobile view)..................................................................... 23 7. Check Home/Subpage Masthead Image Dimension......................................................................... 27 8. Open Web WhatsApp Aplication ...................................................................................................... 28 9. Add Waze Button (Desktop).............................................................................................................. 30 10. Add Waze Button (Mobile) ............................................................................................................... 34 Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 2 of 35
1. Update Company Address a) Find your company address in Google Map i) Go to www.google.co.in/maps ii) Key in company address > Search iii) Click “Share” button > Click “Embed Map” button iv) Copy the given link v) Open “Notepad” > Paste the link Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 3 of 35
vi) Select the link within the double quote (start from ‘scr’) *Please do not copy the double quote b) Update Google Map in Admin View i) Login to Admin View ii) Go to Website > Page Content Manager iii) Select “Contact Us” page, click “Edit” icon iv) Go to Page Content v) In the google map position within the content, double click the iframe. vi) Paste the selected link (from notepad – Step A) into URL Box > Click “OK” button vii) Click “Save” button viii) Click “Manage User View” Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 4 of 35
2. Update Company Address (Mobile) a) Find your company address in Google Map i) Go to www.google.co.in/maps ii) Key in company address > Search iii) Click “Share” button > Click “Share Link” button iv) Click the “Short URL” > Copy the link Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 5 of 35
b) Update Google Map in Admin View i) Login to Admin View ii) Go to Website > Page Content Manager iii) Select “Contact Us” page, click “Edit” icon iv) Click “Page Details”, choose “Mobile View” from dropdown menu v) Go to Page Content vi) In the google map position within the content, double click the “View Map” button vii) Paste the selected link (Short URL-Step A) into URL Box> Click “OK” button viii) Click “Save” button ix) Click “Manage User View” Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 6 of 35
3. Bottom Banner – Facebook Plugin a) Get the plugin script from Facebook Plugin page i) Go to https://developers.facebook.com/docs/plugins/page-plugin/ ii) Fill up below information in the page a) Facebook Page URL: Company Facebook page URL b) Width: 350 (Example, may vary according website design) c) Height: 280 (Example, may vary according website design) iii) You may change your layout by check or uncheck “Use Small Header”, “Hide cover Photo”, “Adapt to Plugin Container Width”, “Show Friend’s Faces” iv) Once decided, click “Get Code” button Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 7 of 35
v) Choose “IFrame” Tab, copy the script form Step 2 Placeholder b) Place the script into website i) Login to Admin View ii) Go to Website > Object Manager iii) Edit “Bottom Banner” iv) Type some text into the place that you want to place this Facebook Plugin. E.g. “Please Put Iframe Here.” Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 8 of 35
v) Click “Source” button, search for the word that you type just now. Highlight the text and replace with the code that you copy from part A. vi) Click “Source” button back to UI screen. Right now, you will be able to view IFrame in your UI. Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 9 of 35
vii) Click “Save” button. viii) Click “Manage user view”. Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 10 of 35
4. Bottom Banner – Facebook Messenger (By default opened) a) Get the plugin script from Facebook Plugin page i) Go to https://developers.facebook.com/docs/plugins/page-plugin/ ii) Fill up below information in the page a) Facebook Page URL: Company Facebook page URL b) Tabs: messages c) Width: 250 (Example, may vary according website design) d) Height: 300 (Example, may vary according website design) iii) You may change your layout by check or uncheck “Use Small Header”, “Hide cover Photo”, “Adapt to Plugin Container Width”, “Show Friend’s Faces” iv) Once decided, click “Get Code” button Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 11 of 35
v) Choose “IFrame” Tab, copy the script form Step 2 Placeholder b) Place the script into website i) Login to Admin View ii) Go to Website > Object Manager iii) Click “Add Object” button. iv) Fill up the columns as below: a. Object Title: Home :: Banner :: FB Messenger b. Type: Bottom Banner Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 12 of 35
v) Click “Source” button from the Editor, and copy & paste the code from below. <style type=\"text/css\">.fb-msg-container *{ box-sizing:border-box; } .fb-msg-container { position:fixed; bottom:0px; right:20px; z-index:9; } .fb-msg-btn { width: 250px; height:40px; line-height:40px; font-size: 16px; font-weight:400; background-color:#3a5897; border-top-left-radius: 5px; border-top-right-radius: 5px; display:inline-block; color:#fff; cursor:pointer; position:relative; transition:all .3s ease-in-out; } .btn-fb-msg { width: 100%; padding-left:45px; background-image:url('/data/admcms/images/icon-fb-chatbox.png'); background-repeat:no-repeat; background-position: left 20px center; background-size:11px; display:inline-block; } .btn_fb_close { width: 40px; padding-right: 20px; padding-top: 15px; padding-left: 15px; height: 100%; position:absolute; right:0px; z-index:9; display:inline-block; } Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 13 of 35
.fb-msg-btn.close { width:110px; } .fb-msg-btn.close .btn-fb-msg { background-image:none; padding-left:20px; } .fb-msg-btn.close .btn_fb_close { display:none; } </style> <script src=\"https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js\"> </script> <script type=\"text/javascript\"> $(document).ready(function () { if(Cookies.get('chatOpen') == 'false'){ $('#fb-msg').css(\"display\", \"none\"); } $(\".btn_fb_close\").click(function (e) { $(\"#fb-msg\").slideToggle(\"slow\"); if(Cookies.get('chatOpen') == 'false') Cookies.set('chatOpen', 'true', { path: '' }); else Cookies.set('chatOpen', 'false', { path: '' }); }); $(\".btn-fb-msg\").click(function (e) { $(\"#fb-msg\").slideToggle(\"slow\"); if(Cookies.get('chatOpen') == 'false') Cookies.set('chatOpen', 'true', { path: '' }); else Cookies.set('chatOpen', 'false', { path: '' }); }); }); </script> <div class=\"fb-msg-container\"> <div class=\"fb-msg-btn\"><span class=\"btn-fb-msg\">Talk to Us Now</span><a class=\"btn_fb_close\" href=\"#\"><img src=\"/data/admcms/images/btn_close_fb.png\" /></a> </div> <div id=\"fb-msg\"> Place your iFrame here </div> </div> vi) Search for keyword “Place your iFrame here”, and replace it with the code that you copy from part A. Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 14 of 35
Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 15 of 35
vii) Click “Source” button back to UI screen. Right now, you will be able to view IFrame in your UI. viii) Click “Save” button. ix) Click “Manage user view”. x) Navigate to the page that you would like to add this Facebook Messenger. xi) Scroll down to bottom, click “Assign” button. xii) From the menu, tick on “Home :: Banner :: FB Messenger”, and save. PS: This Facebook Messenger will be opened automatically after page load. Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 16 of 35
5. Bottom Banner – Facebook Messenger (By default closed) a) Get the plugin script from Facebook Plugin page i) Go to https://developers.facebook.com/docs/plugins/page-plugin/ ii) Fill up below information in the page a) Facebook Page URL: Company Facebook Page URL b) Tabs: messages c) Width: 250 (Example, may vary according website design) d) Height: 300 (Example, may vary according website design) iii) You may change your layout by check or uncheck “Use Small Header”, “Hide cover Photo”, “Adapt to Plugin Container Width”, “Show Friend’s Faces” iv) Once decided, click “Get Code” button Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 17 of 35
v) Choose “IFrame” Tab, copy the script form Step 2 Placeholder b) Place the script into website i) Login to Admin View ii) Go to Website > Object Manager iii) Click “Add Object” button. iv) Fill up the columns as below: a. Object Title: Subpage :: Banner :: FB Messenger b. Type: Bottom Banner Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 18 of 35
v) Click “Source” button from the Editor, and copy & paste the code from below. <div> <style type=\"text/css\">.fb-msg-container *{ box-sizing:border-box; } .fb-msg-container { position:fixed; bottom:0px; right:20px; z-index:9; } .fb-msg-btn { width: 250px; height:40px; line-height:40px; font-size: 16px; font-weight:400; background-color:#3a5897; border-top-left-radius: 5px; border-top-right-radius: 5px; display:inline-block; color:#fff; cursor:pointer; position:relative; transition:all .3s ease-in-out; } .btn-fb-msg { width: 100%; padding-left:45px; background-image:url('../img/usr/icon-fb-chatbox.png’); background-repeat:no-repeat; background-position: left 20px center; background-size:11px; display:inline-block; } .btn_fb_close { width: 40px; padding-right: 20px; padding-top: 15px; padding-left: 15px; height: 100%; position:absolute; right:0px; z-index:9; display:inline-block; Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 19 of 35
} .fb-msg-btn.close { width:110px; } .fb-msg-btn.close .btn-fb-msg { background-image:none; padding-left:20px; } .fb-msg-btn.close .btn_fb_close { display:none; } </style> <script type=\"text/javascript\"> $(document).ready(function () { $(\".btn_fb_close\").click(function (e) { $(\"#fb-msg\").slideToggle(\"slow\"); }); $(\".btn-fb-msg\").click(function (e) { $(\"#fb-msg\").slideToggle(\"slow\"); }); }); </script> <div class=\"fb-msg-container\"> <div class=\"fb-msg-btn\"><span class=\"btn-fb-msg\">Talk to Us Now</span><a class=\"btn_fb_close\" href=\"#\"><img src=\"../img/usr/btn_close_fb.png\" /></a> </div> <div id=\"fb-msg\" style=\"display:none;\"> Place your iFrame here. </div> </div> </div> vi) Search for keyword “Place your iFrame here”, and replace it with the code that you copy from part A. Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 20 of 35
vii) Click “Source” button back to UI screen. Right now, you will be able to view IFrame in your UI. Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 21 of 35
viii) Click “Save” button. ix) Click “Manage user view”. x) Navigate to the page that you would like to add this Facebook Messenger. xi) Scroll down to bottom, click “Assign” button. xii) From the menu, tick on “Subpage :: Banner :: FB Messenger”, and save. PS: This Facebook Messenger will be closed automatically after page load. Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 22 of 35
6. Bottom Banner – Facebook Messenger (Mobile view) a) Get Facebook Messenger link. i) Open your company Facebook page. ii) Change the domain name to https://www.messenger.com/t/ i. https://www.facebook.com/WebteqSolution becomes https://www.messenger.com/t/WebteqSolution iii) Copy the messenger link. iv) If your Facebook page is newly created and doesn’t have a unique name yet, please try the following ways to get your Messenger link: i. Go to your Facebook page (e.g: https://www.facebook.com/Yakumo- 732034593646644/ ) ii. Copy and numbers behind your Facebook page name, in this case it was 732034593646644. iii. Paste it behind the domain https://www.messenger.com/t/ (e.g: https://www.messenger.com/t/732034593646644). iv. Copy the messenger link. b) Place the script into website. i) Login into Admin View. ii) Go to Website > Object Manager. iii) Click “Add Object” button. iv) Fill up the columns as below: i. Object Title: Mobile :: Banner :: FB Messenger ii. Type: Mobile Banner v) Click “Source” button from the Editor, and copy & paste the code from below. <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"width:100%; padding:10px 0px; border-top:solid 1px #dddddd; border-bottom:solid 1px #dddddd; background- color:#eaeaea;\"> <tbody> <tr> <td> <table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"> <tbody> <tr> <td style=\"height: 50px; text-align: right; width: 40px;\"><a href=\"https://www.messenger.com/t/ewinnertech\" target=\"_blank\"><img alt=\"\" src=\"../../img/usr/mobile/icon-btm-panel-talk-to-us-now.png\" style=\"width: 24px; height: 24px;\" /> </a> </td> vi) Click “Source” button back to UI screen. Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 23 of 35
<td style=\"height: 50px; width: 200px; text-align: center;\"><a href=\"https://www.messenger.com/t/ewinnertech\" target=\"_blank\"><span style=\"color:#494949; font-size:22px;\">Talk to Us Now</span> </a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> vii) Double click the icon to open edit window. viii) Choose “Link” section. Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 24 of 35
ix) Paste the URL from Part A into the URL column, and click “OK” to save. x) Double click “Talk to Us Now” to open edit window. Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 25 of 35
xi) Paste the URL from Part A into the URL column, and click “OK” to save. xii) Click “Save” button. xiii) Click “Manage user view”. xiv) Only in Google Chrome, and Mozilla Firefox, press F12 to enter developer mode. xv) Press CTRL + ALT + M to enter mobile mode. xvi) Press F5 to reload the page. xvii) Now the page is in mobile view, scroll down to the bottom. xviii) Click “Assign” button. xix) Choose “Mobile :: Banner :: FB Messenger” to add the banner. Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 26 of 35
7. Check Home/Subpage Masthead Image Dimension a) Login to admin view. b) Go to website > Slide Show Manager c) Click view image icon of that particular masthead. d) Right click to save the image open in new browser tab. e) Right click to downloaded image, choose properties to check the width and height of the picture. Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 27 of 35
8. Open Web WhatsApp Aplication a) Login to admin view. b) In the text editor, highlight the part you wish to add link, then click the link icon. c) Copy and paste below link in the URL column. Please follow below phone no. format. Link: https://api.whatsapp.com/send?phone=xxxxxxxxx *phone number must not have spacing & symbol (country code + phone no) Sample: 60170000000, 6500000000 Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 28 of 35
d) In the target tab, select “New Window (_blank)”. Then, click OK button. e) Save and click manage user view. Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 29 of 35
9. Add Waze Button (Desktop) a) Find your company latitude and longitude i) Go to https://www.latlong.net/ ii) Key in company address -> Find b) Add Waze Button in admin view i) Login to admin view ii) Go to Website > Page Content Manager iii) Go the page you want to add Waze button iv) Go to Page Content v) Save below image in your desktop and upload the image to editor. vi) Copy the URL and save it for later use. After that click “Cancel”. Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 30 of 35
vii) Click “Source” button from the Editor, and copy & paste the code from below. Kindly paste the code at the top of the editor. You may skip the yellow color highlighted word if it already found in the editor. However, you need to paste the code within the yellow color highlighted word in editor. <style type=\"text/css\"> .hypwaze{ background:url('put the URL in step v’) no-repeat 0px 0px; display: block; width: 120px; height: 45px; text-indent: -999px; } .hypwaze:hover { background:url('put the URL in step v’) no-repeat 0px -95px; } </style> viii) Click on “Source” button from the Editor. ix) Click on this button. x) Copy the code from below and paste into URL Column. https://www.waze.com/livemap?zoom=17&lat=your Latitude &lon=your longtitude Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 31 of 35
xi) Go to “Target” tab and select “New Window (_blank)”. To make the waze open in new window. xii) Go to “Advanced” tab and set up as below. After done click “Ok” button. Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 32 of 35
xiii) Click “Save” button xiv) Click “Manage User View” Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 33 of 35
10. Add Waze Button (Mobile) a) Find your company latitude and longitude i) Go to https://www.latlong.net/ ii) Key in company address -> Find b) Add Waze Button in admin view i) Login to admin view ii) Go to Website > Page Content Manager iii) Go the page you want to add Waze button iv) Click “Page Details”, choose “Mobile View” from dropdown menu v) Go to Page Content vi) Save below image in your desktop and upload the image to editor. vii) In editor, select the image and click on button. Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 34 of 35
viii) Copy the code from below and paste into URL Column. After done click “ok” button. waze://?ll=your latitude,your longtitude&navigate=yes ix) Click “Save” button x) Click “Manage User View” Webteq Solution Sdn Bhd No. 34-01 & 34-02, Jalan Austin Perdana 2/23, Taman Austin Perdana, 81100 Johor Bahru, Johor, Malaysia. Page 35 of 35
Search
Read the Text Version
- 1 - 35
Pages:
