加入国际站
返回旧版 新版反馈
关闭 评分
铜币:
剩余
* 评分才能提交噢
理由:

 | 
只看楼主


  • 0 楼#

    國産〇〇柒

    • 粉丝
      2139
    • 人气
      1440
    • 积分
      85
    • 铜币
      85349

    国産〇〇柒
          最近经常有小伙伴们咨询我关于旺旺调用代码在装修和宝贝详情页内的使用方法。其实无论是装修页面还是宝贝详情页内,阿里都已经给出了旺旺聊天的入口,装修页面是模板形式,再加上右侧一个主账号旺旺;宝贝详情页在焦点图右侧的部位,再加上右侧一个产品所属账号的旺旺。理论上应该是够用的,但是有的小伙伴觉得装修页面想做出更漂亮的自定义的旺旺页面,宝贝详情页下部也想加入产品所有人的旺旺。今天就用两个实例给大家分享一下有关旺旺调用代码的使用方法。
    一,装修页面的使用:
    (今天是为了给大家演示效果,所以随意弄了一个简单的版式用作参考使用)
    需要达到的功能效果:1,点击头像可弹出旺旺聊天窗口;2,点击旺旺或名字也可弹出旺旺聊天窗口(这里使用阿里生成代码并且进行过了部分修改,阿里给出了四种代码,我们可根据需求来生成代码,并且可以根据自己的需求来进行代码修改,达到自己想要的视觉效果)
    注释:代码生成地址:https://www.alibaba.com/help/atm-url-generator-en.html
          按照惯例,直接上最终效果图:

    图片:装修页面做好的图.jpg



          本次分享的方法没有使用热点。每个业务员的头像与背景图片是分离的,如图背景:

    图片:990装修用-干净背景.jpg



          如果小伙伴们喜欢,也可以不使用上面背景图的方式制作,可以把所有的文字都与图片进行分离,本次分享使用的是一张制作好的背景图片(如有机会再跟小伙伴们分享不使用背景图的制作方式)
    小伙伴们只需要把制作好的背景图片和业务员的头像上传到图片银行复制出来它的链接即可。链接植入如下代码中:(不同的设计图,代码是需要调整的,下面代码只符合上图在阿里内的定位)
    <p><img src="背景图片链接地址放在这里" alt="" width="990" height="380" /></p>
    <p style="color: #ff0000; margin-top: -270.0px; margin-left: 130.0px;"><a href="http://amos.alicdn.com/msg.aw?v=2&uid=cn1511425066&site=enaliint&s=24&charset=UTF-8" target="_blank"><img src="业务员头像链接地址放在这里" alt="" /></a></p>
    <p style="color: #ff0000; margin-top: -160.0px; margin-left: 430.0px;"><a href="http://amos.alicdn.com/msg.aw?v=2&uid=cn1511425066&site=enaliint&s=24&charset=UTF-8" target="_blank"><img src="业务员头像链接地址放在这里" alt="" /></a></p>
    <p style="color: #ff0000; margin-top: -160.0px; margin-left: 720.0px;"><a href="http://amos.alicdn.com/msg.aw?v=2&uid=cn1511425066&site=enaliint&s=24&charset=UTF-8" target="_blank"><img src="业务员头像链接地址放在这里" alt="" /></a></p>
    <p style="margin-left: 150.0px; margin-top: 18.0px;"><a style="display: inline-block; font-weight: bold; text-align: center; text-decoration: none;" href="//amos.alicdn.com/msg.aw?v=2&uid=cn1511425066&site=enaliint&s=24&charset=UTF-8" target="_blank" data-uid="cn1511425066"><img style="border: none; margin-right: 5.0px;" src="//amos.alicdn.com/online.aw?v=2&uid=cn1511425066&site=enaliint&s=22&charset=UTF-8" alt="" /><span style="font-weight: bold; font-size: 16.0px; color: #ffffff;">kelon hao</span></a></p>
    <p style="margin-left: 458.0px; margin-top: -25.0px;"><a style="display: inline-block; font-weight: bold; text-align: center; text-decoration: none;" href="//amos.alicdn.com/msg.aw?v=2&uid=cn1511425066&site=enaliint&s=24&charset=UTF-8" target="_blank" data-uid="cn1511425066"><img style="border: none; margin-right: 5.0px;" src="//amos.alicdn.com/online.aw?v=2&uid=cn1511425066&site=enaliint&s=22&charset=UTF-8" alt="" /><span style="font-weight: bold; font-size: 16.0px; color: #ffffff;">kelon hao</span></a></p>
    <p style="margin-left: 758.0px; margin-top: -25.0px; margin-bottom: 80.0px;"><a style="display: inline-block; font-weight: bold; text-align: center; text-decoration: none;" href="//amos.alicdn.com/msg.aw?v=2&uid=cn1511425066&site=enaliint&s=24&charset=UTF-8" target="_blank" data-uid="cn1511425066"><img style="border: none; margin-right: 5.0px;" src="//amos.alicdn.com/online.aw?v=2&uid=cn1511425066&site=enaliint&s=22&charset=UTF-8" alt="" /><span style="font-weight: bold; font-size: 16.0px; color: #ffffff;">kelon hao</span></a></p>
    (以上代码已在阿里后台进行调试过,小伙伴们自己使用的时候需要根据自己的设计进行修改,代码里面cn1511425066需要修改成要调用账号的账户,以上代码仅供参考,不明白的小伙伴可以留言咨询交流)
    以上分享只是页面装修中很多种制作方法的其中一种模式,本分享重在代码调用方法的分享,小伙伴们可以自行设计图片效果。
    二,产品详情页的应用:
          由于阿里平台产品详情页和装修自定义模块所兼容的HTML代码有那么一点点的差别,所以有一些时候我们不能用装修的模式来制作产品详情页。今天也用实例的方式来给大家分享一种宝贝详情页内旺旺的调用方法。
    (本实例同样是为了给大家演示效果,所以随意弄了一个简单的版式用作参考使用)
    需要达到的功能效果:1,点击旺旺图标可弹出聊天窗口;2,点击文字可弹出聊天窗口。
          制作完成放入产品详情页效果图如下:

    图片:阿里后台调试后的效果展示-二维码解释.jpg



          由上图可以看出,这是一个类似名片的展示效果,内部包含内容有:1,企业LOGO;2,企业名称;3,企业主营业务;4,业务员英文名;5,地址;6,电话、传真;7,Email和网址;8,企业二维码旺铺或者联系方式二维码。
    该实例采用图文分离的方式来制作,是背景图加文字的方式,背景图如下:

    图片:750-000.jpg



          小伙伴们如有兴趣可以使用该背景图进行试验,所需全部代码如下:
    <div style="background: url('http://g01.s.alicdn.com/kf/HTB1lP70OpXXXXbXXVXXq6xXFXXXM/200516814/HTB1lP70OpXXXXbXXVXXq6xXFXXXM.jpg') no-repeat; width: 750px; height: 450px;">
    <table border="0" width="750">
    <tbody>
    <tr style="height: 90px;">
    <td style="height: 90px;" width="424"> </td>
    <td style="font-size: 36px; height: 90px;" width="316">YOUR NAME</td>
    </tr>
    <tr style="height: 3px;">
    <td style="padding-left: 80px; padding-top: 15px; font-size: 30px; height: 3px;">COMPANY NAME</td>
    <td style="height: 3px;"><a href="http://amos.alicdn.com/msg.aw?v=2&uid=cn1511425066&site=enaliint&s=24&charset=UTF-8" target="_blank"><img src="http://g02.s.alicdn.com/kf/HTB1yQXfOFXXXXapaXXX760XFXXXg/200516814/HTB1yQXfOFXXXXapaXXX760XFXXXg.png" width="49" height="55" style="margin-left: 75px;" /></a></td>
    </tr>
    <tr style="height: 36px;">
    <td style="padding-left: 80px; height: 36px;">Main Products of the Company</td>
    <td style="padding-left: 28px; padding-bottom: 50px; height: 36px;">   <span style="font-size: 14px;"><a href="http://amos.alicdn.com/msg.aw?v=2&uid=cn1511425066&site=enaliint&s=24&charset=UTF-8" target="_blank">Click and Chat Now</a></span></td>
    </tr>
    <tr style="height: 40px;">
    <td style="height: 40px;"> </td>
    <td style="height: 40px;">A-5 Yaqiuhu Industrial Zone, Mumian wan Village, Buji Town, Shenzhen</td>
    </tr>
    <tr style="height: 36px;">
    <td style="height: 36px;"> </td>
    <td style="height: 36px;">+86 18922222598</td>
    </tr>
    <tr style="height: 34px;">
    <td style="height: 34px;"> </td>
    <td style="height: 34px;">+86 755 65879564</td>
    </tr>
    <tr style="height: 32px;">
    <td style="height: 32px;"> </td>
    <td style="height: 32px;"><address>guochan007@gmail.com</address></td>
    </tr>
    <tr style="height: 26px;">
    <td style="height: 26px;"> </td>
    <td style="height: 26px;">http://www.alibaba007.com</td>
    </tr>
    </tbody>
    </table>
    </div>

    重点提示:
    1、本设计中旺旺图标是单独的图片,也需要单独上传到图片空间且取出其链接地址;
    2、文本中有使用邮箱格式,阿里产品详情页是禁止使用邮箱格式的,所以实际操作过程中@符号可用#号替换,如果觉得视觉效果不好,也可以把@符号单独制作到背景图片上,然后采用定位的方式制作文本;
    3、代码中cn1511425066需要替换为要调用的旺旺账号;
          今天就暂时給大家分享到这里,本次重点分享是旺旺的调用代码在装修和产品详情页的应用,如有不明白的小伙伴可以咨询国産〇〇柒。爱分享,爱学习,一起打造完美旺铺,打造全能外贸圈!
    国産〇〇柒电商分享

  • 1 楼#

    咖啡 ROUTER

    • 粉丝
      61
    • 人气
      1320
    • 积分
      0
    • 铜币
      568

    用户被禁言,该主题自动屏蔽!

  • 2 楼#

    Timon YANG

    • 粉丝
      1
    • 人气
      212
    • 积分
      0
    • 铜币
      3

    大神,给你赞一个

  • 3 楼#

    KELLER FAN

    • 粉丝
      106
    • 人气
      2267
    • 积分
      0
    • 铜币
      415

    代码帝

  • 4 楼#

    柠檬不酸

    • 粉丝
      2
    • 人气
      173
    • 积分
      0
    • 铜币
      89

    还有什么位置。。。

  • 5 楼#

    cn1512882779

    • 粉丝
      5
    • 人气
      136
    • 积分
      0
    • 铜币
      1

    我滴个乖乖,代码一二三部啊,跟着学

  • 6 楼#

    上海国际快递 空运

    • 粉丝
      12
    • 人气
      984
    • 积分
      0
    • 铜币
      50


  • 7 楼#

    贸小七-王

    • 粉丝
      625
    • 人气
      5136
    • 积分
      50
    • 铜币
      3160

    地球已经无法阻止你的脚步了!

  • 8 楼#

    cn110580365

    • 粉丝
      8
    • 人气
      737
    • 积分
      5
    • 铜币
      1264


  • 9 楼#

    cn****nnp

    • 粉丝
      34
    • 人气
      2816
    • 积分
      0
    • 铜币
      563

    用户被禁言,该主题自动屏蔽!

  • 10 楼#

    cn1514154034

    • 粉丝
      3
    • 人气
      288
    • 积分
      15
    • 铜币
      94

     咱也来学一学

  • 11 楼#

    cn****ihm

    • 粉丝
      17
    • 人气
      914
    • 积分
      311
    • 铜币
      71

    666

  • 12 楼#

    boloni

    • 粉丝
      1
    • 人气
      78
    • 积分
      0
    • 铜币
      0

    666

  • 13 楼#

    Lina1234

    • 粉丝
      10
    • 人气
      265
    • 积分
      0
    • 铜币
      77

    来撑一下

  • 14 楼#

    jtsjewelry

    • 粉丝
      3
    • 人气
      125
    • 积分
      365
    • 铜币
      11

    厉害。Thanks for sharing!

  • 15 楼#

    cn****577

    • 粉丝
      44
    • 人气
      535
    • 积分
      50
    • 铜币
      1373

    大神,给你赞一个

  • 16 楼#

    cn1519828803vyqv

    • 粉丝
      7
    • 人气
      280
    • 积分
      0
    • 铜币
      0

    第二个代码说wangwang头像是无效的,另外背景里的Logo要做成自己的,是自己另做个背景替代吗

  • 17 楼#

    國産〇〇柒

    • 粉丝
      2139
    • 人气
      1440
    • 积分
      85
    • 铜币
      85349

    cn1519828803vyqv:第二个代码说wangwang头像是无效的,另外背景里的Logo要做成自己的,是自己另做个背景替代吗回到原帖
    里面的图片都要大家自己上传到自己的图片银行后进行调取

  • 18 楼#

    國産〇〇柒

    • 粉丝
      2139
    • 人气
      1440
    • 积分
      85
    • 铜币
      85349

    cn220160577:大神,给你赞一个回到原帖
    多些支持  一起学习

  • 19 楼#

    國産〇〇柒

    • 粉丝
      2139
    • 人气
      1440
    • 积分
      85
    • 铜币
      85349

    jtsjewelry:厉害。Thanks for sharing!回到原帖



  • 国産〇〇柒
          最近经常有小伙伴们咨询我关于旺旺调用代码在装修和宝贝详情页内的使用方法。其实无论是装修页面还是宝贝详情页内,阿里都已经给出了旺旺聊天的入口,装修页面是模板形式,再加上右侧一个主账号旺旺;宝贝详情页在焦点图右侧的部位,再加上右侧一个产品所属账号的旺旺。理论上应该是够用的,但是有的小伙伴觉得装修页面想做出更漂亮的自定义的旺旺页面,宝贝详情页下部也想加入产品所有人的旺旺。今天就用两个实例给大家分享一下有关旺旺调用代码的使用方法。
    一,装修页面的使用:
    (今天是为了给大家演示效果,所以随意弄了一个简单的版式用作参考使用)
    需要达到的功能效果:1,点击头像可弹出旺旺聊天窗口;2,点击旺旺或名字也可弹出旺旺聊天窗口(这里使用阿里生成代码并且进行过了部分修改,阿里给出了四种代码,我们可根据需求来生成代码,并且可以根据自己的需求来进行代码修改,达到自己想要的视觉效果)
    注释:代码生成地址:https://www.alibaba.com/help/atm-url-generator-en.html
          按照惯例,直接上最终效果图:

    图片:装修页面做好的图.jpg



          本次分享的方法没有使用热点。每个业务员的头像与背景图片是分离的,如图背景:

    图片:990装修用-干净背景.jpg



          如果小伙伴们喜欢,也可以不使用上面背景图的方式制作,可以把所有的文字都与图片进行分离,本次分享使用的是一张制作好的背景图片(如有机会再跟小伙伴们分享不使用背景图的制作方式)
    小伙伴们只需要把制作好的背景图片和业务员的头像上传到图片银行复制出来它的链接即可。链接植入如下代码中:(不同的设计图,代码是需要调整的,下面代码只符合上图在阿里内的定位)
    <p><img src="背景图片链接地址放在这里" alt="" width="990" height="380" /></p>
    <p style="color: #ff0000; margin-top: -270.0px; margin-left: 130.0px;"><a href="http://amos.alicdn.com/msg.aw?v=2&uid=cn1511425066&site=enaliint&s=24&charset=UTF-8" target="_blank"><img src="业务员头像链接地址放在这里" alt="" /></a></p>
    <p style="color: #ff0000; margin-top: -160.0px; margin-left: 430.0px;"><a href="http://amos.alicdn.com/msg.aw?v=2&uid=cn1511425066&site=enaliint&s=24&charset=UTF-8" target="_blank"><img src="业务员头像链接地址放在这里" alt="" /></a></p>
    <p style="color: #ff0000; margin-top: -160.0px; margin-left: 720.0px;"><a href="http://amos.alicdn.com/msg.aw?v=2&uid=cn1511425066&site=enaliint&s=24&charset=UTF-8" target="_blank"><img src="业务员头像链接地址放在这里" alt="" /></a></p>
    <p style="margin-left: 150.0px; margin-top: 18.0px;"><a style="display: inline-block; font-weight: bold; text-align: center; text-decoration: none;" href="//amos.alicdn.com/msg.aw?v=2&uid=cn1511425066&site=enaliint&s=24&charset=UTF-8" target="_blank" data-uid="cn1511425066"><img style="border: none; margin-right: 5.0px;" src="//amos.alicdn.com/online.aw?v=2&uid=cn1511425066&site=enaliint&s=22&charset=UTF-8" alt="" /><span style="font-weight: bold; font-size: 16.0px; color: #ffffff;">kelon hao</span></a></p>
    <p style="margin-left: 458.0px; margin-top: -25.0px;"><a style="display: inline-block; font-weight: bold; text-align: center; text-decoration: none;" href="//amos.alicdn.com/msg.aw?v=2&uid=cn1511425066&site=enaliint&s=24&charset=UTF-8" target="_blank" data-uid="cn1511425066"><img style="border: none; margin-right: 5.0px;" src="//amos.alicdn.com/online.aw?v=2&uid=cn1511425066&site=enaliint&s=22&charset=UTF-8" alt="" /><span style="font-weight: bold; font-size: 16.0px; color: #ffffff;">kelon hao</span></a></p>
    <p style="margin-left: 758.0px; margin-top: -25.0px; margin-bottom: 80.0px;"><a style="display: inline-block; font-weight: bold; text-align: center; text-decoration: none;" href="//amos.alicdn.com/msg.aw?v=2&uid=cn1511425066&site=enaliint&s=24&charset=UTF-8" target="_blank" data-uid="cn1511425066"><img style="border: none; margin-right: 5.0px;" src="//amos.alicdn.com/online.aw?v=2&uid=cn1511425066&site=enaliint&s=22&charset=UTF-8" alt="" /><span style="font-weight: bold; font-size: 16.0px; color: #ffffff;">kelon hao</span></a></p>
    (以上代码已在阿里后台进行调试过,小伙伴们自己使用的时候需要根据自己的设计进行修改,代码里面cn1511425066需要修改成要调用账号的账户,以上代码仅供参考,不明白的小伙伴可以留言咨询交流)
    以上分享只是页面装修中很多种制作方法的其中一种模式,本分享重在代码调用方法的分享,小伙伴们可以自行设计图片效果。
    二,产品详情页的应用:
          由于阿里平台产品详情页和装修自定义模块所兼容的HTML代码有那么一点点的差别,所以有一些时候我们不能用装修的模式来制作产品详情页。今天也用实例的方式来给大家分享一种宝贝详情页内旺旺的调用方法。
    (本实例同样是为了给大家演示效果,所以随意弄了一个简单的版式用作参考使用)
    需要达到的功能效果:1,点击旺旺图标可弹出聊天窗口;2,点击文字可弹出聊天窗口。
          制作完成放入产品详情页效果图如下:

    图片:阿里后台调试后的效果展示-二维码解释.jpg



          由上图可以看出,这是一个类似名片的展示效果,内部包含内容有:1,企业LOGO;2,企业名称;3,企业主营业务;4,业务员英文名;5,地址;6,电话、传真;7,Email和网址;8,企业二维码旺铺或者联系方式二维码。
    该实例采用图文分离的方式来制作,是背景图加文字的方式,背景图如下:

    图片:750-000.jpg



          小伙伴们如有兴趣可以使用该背景图进行试验,所需全部代码如下:
    <div style="background: url('http://g01.s.alicdn.com/kf/HTB1lP70OpXXXXbXXVXXq6xXFXXXM/200516814/HTB1lP70OpXXXXbXXVXXq6xXFXXXM.jpg') no-repeat; width: 750px; height: 450px;">
    <table border="0" width="750">
    <tbody>
    <tr style="height: 90px;">
    <td style="height: 90px;" width="424"> </td>
    <td style="font-size: 36px; height: 90px;" width="316">YOUR NAME</td>
    </tr>
    <tr style="height: 3px;">
    <td style="padding-left: 80px; padding-top: 15px; font-size: 30px; height: 3px;">COMPANY NAME</td>
    <td style="height: 3px;"><a href="http://amos.alicdn.com/msg.aw?v=2&uid=cn1511425066&site=enaliint&s=24&charset=UTF-8" target="_blank"><img src="http://g02.s.alicdn.com/kf/HTB1yQXfOFXXXXapaXXX760XFXXXg/200516814/HTB1yQXfOFXXXXapaXXX760XFXXXg.png" width="49" height="55" style="margin-left: 75px;" /></a></td>
    </tr>
    <tr style="height: 36px;">
    <td style="padding-left: 80px; height: 36px;">Main Products of the Company</td>
    <td style="padding-left: 28px; padding-bottom: 50px; height: 36px;">   <span style="font-size: 14px;"><a href="http://amos.alicdn.com/msg.aw?v=2&uid=cn1511425066&site=enaliint&s=24&charset=UTF-8" target="_blank">Click and Chat Now</a></span></td>
    </tr>
    <tr style="height: 40px;">
    <td style="height: 40px;"> </td>
    <td style="height: 40px;">A-5 Yaqiuhu Industrial Zone, Mumian wan Village, Buji Town, Shenzhen</td>
    </tr>
    <tr style="height: 36px;">
    <td style="height: 36px;"> </td>
    <td style="height: 36px;">+86 18922222598</td>
    </tr>
    <tr style="height: 34px;">
    <td style="height: 34px;"> </td>
    <td style="height: 34px;">+86 755 65879564</td>
    </tr>
    <tr style="height: 32px;">
    <td style="height: 32px;"> </td>
    <td style="height: 32px;"><address>guochan007@gmail.com</address></td>
    </tr>
    <tr style="height: 26px;">
    <td style="height: 26px;"> </td>
    <td style="height: 26px;">http://www.alibaba007.com</td>
    </tr>
    </tbody>
    </table>
    </div>

    重点提示:
    1、本设计中旺旺图标是单独的图片,也需要单独上传到图片空间且取出其链接地址;
    2、文本中有使用邮箱格式,阿里产品详情页是禁止使用邮箱格式的,所以实际操作过程中@符号可用#号替换,如果觉得视觉效果不好,也可以把@符号单独制作到背景图片上,然后采用定位的方式制作文本;
    3、代码中cn1511425066需要替换为要调用的旺旺账号;
          今天就暂时給大家分享到这里,本次重点分享是旺旺的调用代码在装修和产品详情页的应用,如有不明白的小伙伴可以咨询国産〇〇柒。爱分享,爱学习,一起打造完美旺铺,打造全能外贸圈!
    国産〇〇柒电商分享



  • 用户被禁言,该主题自动屏蔽!



  • 大神,给你赞一个



  • 代码帝



  • 还有什么位置。。。



  • 我滴个乖乖,代码一二三部啊,跟着学






  • 地球已经无法阻止你的脚步了!






  • 用户被禁言,该主题自动屏蔽!



  •  咱也来学一学



  • 666



  • 666



  • 来撑一下



  • 厉害。Thanks for sharing!



  • 大神,给你赞一个



  • 第二个代码说wangwang头像是无效的,另外背景里的Logo要做成自己的,是自己另做个背景替代吗



  • cn1519828803vyqv:第二个代码说wangwang头像是无效的,另外背景里的Logo要做成自己的,是自己另做个背景替代吗回到原帖
    里面的图片都要大家自己上传到自己的图片银行后进行调取



  • cn220160577:大神,给你赞一个回到原帖
    多些支持  一起学习



  • jtsjewelry:厉害。Thanks for sharing!回到原帖


48 回复

与 外贸社区|外贸圈 的连接断开,我们正在尝试重连,请耐心等待